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 数据时的触发 |