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、实现效果