json-editor-v3

基于 jsonEditor 和 vue3 封装的 json 可视化编辑器组件, 可全屏显示

安装

npm i json-editor-v3

使用

全局引入

import { createApp } from "vue";
const app = createApp(App);
import JsonEditorV3 from "json-editor-v3";
app.use(JsonEditorV3);

局部引入

setup 语法糖不用注册组件

import JsonEditorV3 from "json-editor-v3";
export default {
  components: { JsonEditorV3 },
};

示例

<json-editor-v3
  @change="change"
  v-model="jsonList"
  titleBg="#444"
></json-editor-v3>

属性

参数	类型	是否必需	默认值	说明
mode	String	否	code	可选值：code,text,tree,preview
v-model	[Object, Array]	是	[]	编辑器 json 值
height	Number	否	400	编辑器高度
isFull	Boolean	否	true	是否可以全屏
titleBg	String	否	#1890ff	编辑器标题背景颜色
bdColor	String	否	#1890ff	编辑器边框颜色
editBg	String	否	#fff	编辑器区域背景颜色

事件

事件名称	回调参数	说明
change	Function(Object)	改变 json 数据时的触发