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可视化编辑器的介绍与应用的更多相关文章

  1. Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

    pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...

  2. 10 个免费的 jQuery 可视化编辑器插件

    富文本编辑器,也就是所见即所得的 HTML 编辑器,是网站一个非常重要的组件,特别是对于一些内容发布网站来说.本文介绍 10 个基于 jQuery 的可视化文本编辑器. MarkitUp markIt ...

  3. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  4. CabloyJS实现了一款基于X6的工作流可视化编辑器

    介绍 文档演示:CMS审批工作流演示了如何通过JSON来直接创建一个工作流定义,通常用于为具体的业务数据生成预定义或内置审批工作流的场景 CabloyJS 4.8.0采用X6 图编辑引擎实现了一款工作 ...

  5. rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

    之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...

  6. 使用wp_editor函数实现可视化编辑器

    在最近的wp项目中遇到了需要使用可视化编辑器来接收用户的输入,正好就研究了一下wp_editor这个函数的用法,利用这个函数能很方便的把textarea文本域变成可视化编辑器. Wp_editor函数 ...

  7. myeclipse关闭html,jsp等页面的可视化编辑器

    myeclipse打开html,jsp等页面时,有的是默认用可视化编辑器打开的,这样打开会显得很慢,只要关闭可视化编辑器就会快很多了,方法如下: 1,选择菜单: windows -> prefe ...

  8. JSON Editor 中文文档

    JSON Editor JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑.它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行 ...

  9. 后台文本编辑器KindEditor介绍

    后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

随机推荐

  1. Jenkins制品管理

    目录 一.简介 二.Jenkins管理制品 三.Nexus maven上传 jenkins上传 管理Docker镜像 管理raw 四.拷贝制品 五.版本号 Version Number 一.简介 制品 ...

  2. MySQL数据库如何实现增量备份

    1 .通过SHOW VARIABLES LIKE '%log_bin%';查看数据库是否开启增量备份log_bin=ON则为开启log_bin=OFF则为关闭 2 .修改mysql配置文件mysql. ...

  3. Linux core 文件浅析

    浅析Linux下core文件 当我们的程序崩溃时,内核有可能把该程序当前内存映射到core文件里,方便程序员找到程序出现问题的地方.最常出 现的,几乎所有C程序员都出现过的错误就是"段错误& ...

  4. 扬我国威,来自清华的开源项目火爆Github

    前几天TJ君跟大家分享了几个有趣的Github项目(加密解密.食谱.新冠序列,各种有趣的开源项目Github上都有),其中呢,有不少是来自斯坦福大学的项目,当时TJ君就不由得想,什么时候能看到的项目都 ...

  5. 最新超详细VMware下CentOS系统安装

    一.了解CentOS系统 CentOS是免费的.开源的.可以重新分发的开源操作系统,CentOS(Community Enterprise Operating System,中文意思是社区企业操作系统 ...

  6. MAVEN基础讲解

    MAVEN解决的问题 1.当我们开始一个工程的时候往往需要几十甚至上百个jar包,如果没有一个管理工具的话,结果就是每个都需要自己手动导入工程目录,并且还有可能发生jar包冲突,版本冲突等问题 2.在 ...

  7. Mysql 表名忽略大小写-连接字符集随笔记录

    1.参数说明: lower_case_table_names=0 表名存储为给定的大小和比较是区分大小写的 lower_case_table_names = 1 表名存储在磁盘是小写的,但是比较的时候 ...

  8. Oracle使用数据泵导入/导出数据(expdp/impdp)

    Oracle使用数据泵导入/导出数据(expdp/impdp) A电脑上的操作(expdp数据导出) 运行cmd: 登录数据库,输入命令:sqlplus 使用管理员角色登录需要在用户名后加" ...

  9. SPringBoot 配置类继承WebMvcConfigurationSupport和实现WebMvcConfigurer的使用

    个人习惯使用  实现的方式 public class WebMvcConfiguration implements WebMvcConfigurer {

  10. JAVA提取字符串中所有的URL链接,并加上a标签

    工具类 Patterns.java 1 package com.util; 2 3 import java.util.regex.Matcher; 4 import java.util.regex.P ...