本文主要介绍了vue-json-editorjson编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
一、概述二、vue-json-editor使用安装插件使用访问三、bin代码编辑器安装模块引入
一、概述
现有一个某视频剪辑软件项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。
编辑器插件就可以实现这个功能
二、vue-json-editor使用
安装插件
npm安装vue-JSON-编辑器-保存
使用
测试。某视频剪辑软件
模板
div style=' width:70%；左边距：30px上边距：30px '
编辑器
v-model='resultInfo '
:showBtns='false '
:模式=' '代码' '
@json-change='onJsonChange '
@json-save='onJsonSave '
@has-error='onError '
/
英国铁路公司
El-button type=' primary ' @ click=' check JSON '确定/el-button
/div
/模板
脚本
//导入模块
从" vue-JSON-编辑器"导入vueJsonEditor
导出默认值{
//注册组件
组件：{ vueJsonEditor }，
data() {
返回{
hasJsonFlag:true，//json是否验证通过
//json数据
结果信息：{
员工':[
{
名字':'比尔，
姓氏':'盖茨'
},
{
名字':'乔治，
姓氏':'布什'
},
{
名字':'托马斯，
姓氏':'卡特'
}
]
}
}
},
已安装：函数(){
},
方法：{
onJsonChange(值){
//console.log('更改值：',值);
//实时保存
this.onJsonSave(值)
},
onJsonSave(值){
//console.log('保存值：',值);
this.resultInfo=value
this.hasJsonFlag=true
},
错误(值){
//console.log('json错误了值：',值);
this.hasJsonFlag=false
},
//检查json
checkJson(){
if (this.hasJsonFlag==false){
//console.log('json验证失败)
//这个message.error('json验证失败)
警报(' json验证失败)
返回错误的
}否则{
//console.log('json验证成功)
//这个message.success('json验证成功)
警报(' json验证成功)
返回真实的
}
},
}
}
/脚本
风格
/风格
插件参数说明：
编辑器
v-model='resultInfo' //绑定数据结果信息
:showBtns='false' //是否显示保存按钮
:mode=''code'' //默认编辑模式
//显示中文，默认英文
@json-change='onJsonChange' //数据改变事件
@json-save='onJsonSave' //数据保存事件
@has-error='onError' //数据错误事件
/
相关说明：
resultInfo 默认绑定的变量，这个变量可以为空，编辑器会显示为{}
:showBtns 这里不显示保存按钮，为什么呢？原因有2个。1. 默认样式不好看。2. 只能当json数据正确，才能点击保存按钮，否则禁止点击。
json-change，json-save，has-error 这3个事件，是会实时触发的。
这里我额外加了一个检测方法，用来判断json数据是否正确。默认标记为没错，当不正确时，会改变状态为错误。
访问
点击确定，提示成功
改为错误的，点击确定，会提示失败。
注意：这个json编辑会带有下来菜单，实际项目中，需要去除，比较用户误操作。
在实际使用中发现几个问题：
1.输入中文时，传给后端的值不多
2.输入大量json时，会有部分数据丢失。
因此，我们使用下面的编辑器箱子代码编辑器
三、bin-code-editor
安装模块
npm安装包-代码-编辑器-d
引入
在主页。射流研究…中写入2行
从" bin代码编辑器"导入代码编辑器
vue。使用(代码编辑器)；
测试。某视频剪辑软件
模板
div style=' width:70%；左边距：30px上边距：30px '
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
英国铁路公司
El-button type=' primary ' @ click=' onSubumit '提交/el-button
/div
/模板
脚本
const jsonData=`{
员工':[{
名字':'比尔，
姓氏':'盖茨'
}, {
名字':'乔治，
姓氏':'布什'
}, {
名字':'托马斯，
姓氏':'卡特'
}]
}`
导出默认值{
data() {
返回{
jsonStr:jsonData
}
},
方法：{
//检测json格式
isJSON(str) {
if (typeof str=='string') {
尝试{
var obj=JSON。parse(str)；
if(typeof obj=='object' obj ){
返回真实的
}否则{
返回错误的
}
} catch(e) {
返回错误的
}
} else if(type of str==' object ' str){
返回真实的
}
},
onSubumit(){
如果(!this.isJSON(this.jsonStr)){
这个message.error(`json格式错误`)
返回错误的
}
这个message.success('json格式正确)
}
}
}
/脚本
风格
/风格
访问测试页面，效果如下：
输入错误的值，点击执行，会有提示
到此这篇关于编辑器json编辑器的使用的文章就介绍到这了，更多相关vue json编辑器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。