我要评论vue使用json编辑器vue-json-editor
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" // 绑定的json数据
:showbtns="false" // -是否显示按钮
mode="code" // 模式：tree text form code等
lang="zh" // 语言
:expanded-on-start="true" // 初始化时，是否自动展开
@json-change="onjsonchange" // json改变时，触发的事件
@json-save="onjsonsave" // json保存事件
@has-error="onerror" // 出现错误时，触发的事件
/>
</div>
</template>
<script>
import vuejsoneditor from 'vue-json-editor'
export default {
components: { vuejsoneditor },
data() {
return {
hasjsonflag: true, // json是否验证通过
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
},
// 检查json
checkjson() {
if (this.hasjsonflag === false) {
this.$message.error('请输入格式正确的json数据!')
return false
} else {
return true
}
}
}
}
</script>
<style lang="scss" scoped>
.code-json-editor {
/* jsoneditor右上角默认有一个链接,加css去掉 */
/deep/ .jsoneditor-poweredby {
display: none !important;
}
}
</style>4、实现效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论