这里写目录标题
1、安装插件 2、引入插件并注册 3、使用示例 4、实现效果
1、安装插件
npm install vue-json-editor --save
2、引入插件并注册
import vueJsonEditor from 'vue-json-editor'
export default {
components : { vueJsonEditor } ,
}
3、使用示例
< template>
< div class = "code-json-editor" >
< vue- json- editor
v- model= "jsonContent"
: showBtns= "false"
mode= "code"
lang= "zh"
: expanded- on- start= "true"
@json- change= "onJsonChange"
@json- save= "onJsonSave"
@has- error= "onError"
/ >
< / div>
< / template>
< script>
import vueJsonEditor from 'vue-json-editor'
export default {
components : { vueJsonEditor } ,
data ( ) {
return {
hasJsonFlag : true ,
jsonContent : { }
}
} ,
methods : {
onJsonChange ( value ) {
this . onJsonSave ( value)
} ,
onJsonSave ( value ) {
this . jsonContent = value
this . hasJsonFlag = true
} ,
onError ( value ) {
console. log ( 'json错误了value:' , value)
this . hasJsonFlag = false
} ,
checkJson ( ) {
if ( this . hasJsonFlag === false ) {
this . $message. error ( '请输入格式正确的JSON数据!' )
return false
} else {
return true
}
}
}
}
< / script>
< style lang= "scss" scoped>
. code- json- editor {
/ deep/ . jsoneditor- poweredBy {
display : none ! important;
}
}
< / style>
4、实现效果