vue-json-editorjson编辑器⼀、概述
现有⼀个vue项⽬，需要⼀个json编辑器，能够格式化json数据，同时也⽀持编辑功能。
vue-json-editor 插件就可以实现这个功能
⼆、vue-json-editor 使⽤
安装插件
npm install vue-json-editor --save
使⽤
test.vue
<template>
<div >
<vue-json-editor
v-model="resultInfo"
:showBtns="false"
:mode="'code'"
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave"
@has-error="onError"
/>
<br>
<el-button type="primary" @click="checkJson">确定</el-button>
</div>
</template>
<script>
// 导⼊模块
import vueJsonEditor from 'vue-json-editor'
export default {
// 注册组件
components: { vueJsonEditor },
data() {
return {
hasJsonFlag:true,  // json是否验证通过
// json数据
resultInfo: {
'employees': [
{
'firstName': 'Bill',
'lastName': 'Gates'
},
{
'firstName': 'George',
'lastName': 'Bush'
},
{
'firstName': 'Thomas',
'lastName': 'Carter'
}
]
}
}
},
mounted: function() {
},
methods: {
onJsonChange (value) {
/
/ console.log('更改value:', value);
// 实时保存
},
onJsonSave (value) {
// console.log('保存value:', value);
this.hasJsonFlag = true
},
onError(value) {
// console.log("json错误了value:", value);
this.hasJsonFlag = false
},
// 检查json
checkJson(){
if (this.hasJsonFlag == false){
// console.log("json验证失败")
// this.$("json验证失败")
alert("json验证失败")
return false
} else {
// console.log("json验证成功")
/
/ this.$message.success("json验证成功")
alert("json验证成功")
return true
}
},
}
}
</script>
<style>
</style>
View Code
插件参数说明：
<vue-json-editor
v-model="resultInfo"  // 绑定数据resultInfo
:showBtns="false"  // 是否显⽰保存按钮
:mode="'code'"  // 默认编辑模式
lang="zh"  // 显⽰中⽂，默认英⽂
@json-change="onJsonChange"  // 数据改变事件
@json-save="onJsonSave"  // 数据保存事件
@has-error="onError"  // 数据错误事件
/>
相关说明：
resultInfo  默认绑定的变量，这个变量可以为空，编辑器会显⽰为{}
:showBtns 这⾥不显⽰保存按钮，为什么呢？原因有2个。1. 默认样式不好看。2. 只能当json数据正确，才能点击保存按钮，否则禁⽌点击。json-change，json-save，has-error 这3个事件，是会实时触发的。
这⾥我额外加了⼀个检测⽅法，⽤来判断json数据是否正确。默认标记为true，当不正确时，会改变状态为false。
访问
点击确定，提⽰成功
改为错误的，点击确定，会提⽰失败。
注意：这个json编辑会带有下来菜单，实际项⽬中，需要去除，⽐较⽤户误操作。
在实际使⽤中发现⼏个问题：
1. 输⼊中⽂时，传给后端的值不多
2. 输⼊⼤量json时，会有部分数据丢失。
因此，我们使⽤下⾯的编辑器bin-code-editor
三、bin-code-editor
|
安装模块
npm install bin-code-editor -d
引⼊
在 main.js 中写⼊2⾏
import CodeEditor from 'bin-code-editor';
Vue.use(CodeEditor);
test.vue
<template>
<div >
<b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor> <br>
<el-button type="primary" @click="onSubumit">提交</el-button>
</div>
</template>
<script>
const jsonData =`{
"employees": [{
"firstName": "Bill",
"lastName": "Gates"
}, {
"firstName": "George",
"lastName": "Bush"
}, {
"firstName": "Thomas",
"lastName": "Carter"
}]
}`
export default {
data() {
return {
jsonStr:jsonData
}
},
methods: {
// 检测json格式
isJSON(str) {
if (typeof str == 'string') {
try {
var obj=JSON.parse(str);
if(typeof obj == 'object' && obj ){
return true;
}else{
json检查
return false;
}
} catch(e) {
return false;
}
}else if (typeof str == 'object'  && str) { return true;
}
},
onSubumit(){
if (!this.isJSON(this.jsonStr)){
this.$(`json格式错误`)
return false
}
this.$message.success('json格式正确')      }
}
}
</script>
<style>
</style>
View Code
访问测试页⾯，效果如下：
输⼊错误的值，点击执⾏，会有提⽰
本⽂参考链接：

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