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 {

	  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编辑器还是比较好用的，我是应用在了测试用例模块上，可以将数据写入与后端对接，进行调用。

vue-json-editor可视化编辑器的介绍与应用的更多相关文章

Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具 ...
10 个免费的 jQuery 可视化编辑器插件
富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...
React Editor 应用编辑器(1) - 拖拽功能剖析
这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页文档流布局 ...
CabloyJS实现了一款基于X6的工作流可视化编辑器
介绍文档演示:CMS审批工作流演示了如何通过JSON来直接创建一个工作流定义,通常用于为具体的业务数据生成预定义或内置审批工作流的场景 CabloyJS 4.8.0采用X6 图编辑引擎实现了一款工作 ...
rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能
之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...
使用wp_editor函数实现可视化编辑器
在最近的wp项目中遇到了需要使用可视化编辑器来接收用户的输入,正好就研究了一下wp_editor这个函数的用法,利用这个函数能很方便的把textarea文本域变成可视化编辑器. Wp_editor函数 ...
myeclipse关闭html,jsp等页面的可视化编辑器
myeclipse打开html,jsp等页面时,有的是默认用可视化编辑器打开的,这样打开会显得很慢,只要关闭可视化编辑器就会快很多了,方法如下: 1,选择菜单: windows -> prefe ...
JSON Editor 中文文档
JSON Editor JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑.它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行 ...
后台文本编辑器KindEditor介绍
后台文本编辑器KindEditor介绍我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

随机推荐

Docker通过阿里云镜像仓库使用Gitlab_CI部署SpringBoot项目
Docker.Gitlab.阿里云镜像仓库.SpringBoot的相关安装.搭建这里就不讲了. Linux 安装 Docker :https://www.cnblogs.com/linnuo/p/15 ...
模仿写了一个摸鱼APP解决原作者的问题
前几天见到微博里有人提到摸鱼APP,发现需要在windows store下载才可以使用,文件约100多M左右的样子,自已没有登录微软Store的习惯.想想只有一个介面,没有必要这么大,于是,自已动手写 ...
LuoguP3932 浮游大陆的68号岛题解
Content 在一个无限长的数轴上有 \(n\) 个点.第 \(i\) 个点上面有 \(a_i\) 件物品,且第 \(i\) 个点到第 \(i+1\) 个点的距离为 \(b_i\). 定义从第 \( ...
ubuntu上kdump配置：
ubuntu上kdump配置: 1, 安装kdump apt-get install linux-crashdump 2, 调整crashkernel内存大小为768M(默认192M内存太小) 修改 ...
More Effective C++ 基础议题（条款1-4）总结
More Effective C++ 基础议题(条款1-4)总结条款1:仔细区别pointers和references 如果有一个变量,其目的是用来指向(代表)另一个对象,但是也有可能它不指向(代表 ...
React Color使用
需求 - 要在react项目中实现颜色获取器功能解决方案 - 使用react-color 依赖 - git地址:https://github.com/casesandberg/react-color ...
AcWing 1204. 错误票据
题目: 某涉密单位下发了某种票据,并要在年终全部收回. 每张票据有唯一的ID号. 全年所有票据的ID号是连续的,但ID的开始数码是随机选定的. 因为工作人员疏忽,在录入ID号的时候发生了一处错误,造成 ...
Linux使用docker安装flink
配置文件不是原始的修改过,可以根据自己的配置文件来 jobmanager配置 flink-conf.yaml ############################################ ...
c++11之std::bind简单使用
note 更多用法,请参考: cppreference 用的少,容易忘. 我的理解类似延迟计算. 比如,回调函数,将回调函数传入后,回调函数不一定马上被调用. 它是一个模板类,调用后将生成一个新的调 ...
c++设计模式概述之工厂
类写的不规范,原因: 缩短篇幅,实际中请不要这样写. 欢迎指正工厂模式,如其名,想象下现实生活中的工厂,比如Apple的组装工厂,小米产品的组装工厂,华为设备的组装工厂.对我们用户而言,不需要知道他 ...

vue-json-editor可视化编辑器的介绍与应用