vue-json-editor可视化编辑器的介绍与应⽤
vue-json-editor可视化编辑器
最近项⽬中有⽤到json编辑器，我选⽤了这款vue的编辑器，看起来也是⽐较简洁，接下来就具体介绍⼀下它，以及内部属性。
⼀、vue-json-editor的简介
vue-json-editor可以编辑json数据，也可以对其进⾏格式化，我⽤于请求报⽂和响应报⽂的展⽰和上传，基本满⾜想要的功能，界⾯⽐较简单。
⼆、安装vue-json-editor
在⽬标⽂件夹中安装插件。
// 键⼊命令安装插件
npm install vue-json-editor
三、引⽤vue-json-editor
导⼊vue-json-editor
// 导⼊
import vueJsonEditor from 'vue-json-editor'
// 局部注册组件
export default {
vuejson转对象
components: { vueJsonEditor }
}
页⾯引⽤
// 页⾯中引⽤vue-json-editor(应⽤时删去注释)
<template>
<vue-json-editor
v-model="resultInfo"  // 双向绑定数据
:showBtns="false"  // 是否展⽰保存按钮
:mode="'tree'"  // 默认模式
lang="zh"  // 语⾔中⽂，默认英⽂
:expandedOnStart="true" // 是否展开JSON编辑器模式
@json-change="onJsonChange"  // 改变调⽤事件
@json-save="onJsonSave"  // 保存调⽤事件
/>
</template>
事件调⽤
// json编辑器内容变化
onJsonChange(value) {
console.log('value:', value);
},
// json编辑器内容保存
onJsonSave(value) {
console.log('value:', value);
},
添加测试数据
// 在data中添加测试数据
resultInfo: {
"test1": "1234",
"test2": "5678",
"test3": {
"test3-1":3,
"test3-2": [
{
"test3-2-1":"1233",
"test3-2-2":"1155"
},
{
"test3-2-3":"1377",
"test3-2-4":"1499"
}
]
}
},
四、vue-json-editor界⾯展⽰
树结构
树结构看数据⽐较直观，还可以添加你想要的类型的数据。
代码结构
代码结构的光标通常会定位在⼀⾏的内容前⾯，但是添加删除内容却是从内容后⾯开始，跟平常的光标习惯不⼀样，我个⼈是不习惯⽤这个展⽰结构。
表单结构
⽂本结构
⽂本结构，⽐较好添加和编辑内容，我⽐较常⽤，可以粘贴其他数据进来。
视图结构
五、vue-json-editor属性
参数说明类型可选值默认值
v-model绑定值object-{}
mode开始时展⽰结构string tree,code,form,text,view tree
showBtns保存按钮是否显⽰boolean true,false true
lang语⾔string zh(中⽂),en(英⽂)en expandedOnStart在开始时结构为'tree'，'view'和'form'，是否展开json编辑器boolean true,false false
六、vue-json-editor事件
事件名称说明
json-change输⼊内容变化时触发
json-save保存内容变化时触发
has-error输⼊内容不符合json格式时触发
总体来说，vue的json编辑器还是⽐较好⽤的，我是应⽤在了测试⽤例模块上，可以将数据写⼊与后端对接，进⾏调⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。