1.0.0 • Published 4 years ago
json-editor-v3 v1.0.0
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 数据时的触发 | 
1.0.0
4 years ago