vue-json-editor json编辑器的使用

目录

• 一、概述
• 二、vue-json-editor 使用
• 安装插件
• 使用
• 访问
• 三、bin-code-editor
• 安装模块
• 引入

一、概述

现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。

vue-json-editor 插件就可以实现这个功能

二、vue-json-editor 使用

安装插件

npm install vue-json-editor --save

使用

test.vue

插件参数说明：

相关说明：

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

访问测试页面，效果如下：

输入错误的值，点击执行，会有提示

到此这篇关于vue-json-editor json编辑器的使用的文章就介绍到这了,更多相关vue  json编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！