极简的 jsonEditor 插件

安装

# pnpm
pnpm add vue-simple-json
# yarn
yarn add vue-simple-json
# npm
npm install vue-simple-json

示例

预览地址：vue-simple-json

使用

详见example

特性

• ✊ Vue 3 Composition API
• 🔥 TypeScript 开发，提供完整的类型定义文件。

功能支持

• 节点自定义
• 自定义输入类型 可配合主流 UI 框架
• 自定义 key 值颜色
• 展开层级
• 自定义操作

文档

基础属性

| 参数 | 说明 | 类型 | 默认值(示例) | | ------------ | ---------------- | ------- | -------------------------------------- | | json | json 传入参数 | Array | 需要使用 deepAnalysisJson(该函数组件导出，可自定义) 解析后的数据 | | disabled | 是否禁用编辑 | Boolean | false | | extend-all | 是否展开全部层级 | Boolean | false | | extend-level | 展开层级 | Number | 1 （优先级小于 extend-all） | | config | 配置 | object | 见下 config 配置 |

config 属性

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | keyColor | key 值（根据 type 类型设置）对应颜色 | object | 默认：{string:'#71aff1'} | | allowType | 允许类型，可自定义类型 | Array | [{type: 'boolean', desc: '布尔值', default:false, slot: false}] | | appendOperate | 追加操作 | Array | 见下 appendOperate 配置 | | showHover | 是否展示 hover 效果 | Boolean | true | | addType | 属性添加位置 | Boolean | true（true：新属性添加到初始位置，false：新属性出现在结尾） |

appendOperate 属性

| 参数 | 说明 | 类型 | 默认值(示例) | | ---------- | ----------- | ----------- | --------------------------------------------------------- | | key | 唯一标识,默认添加delete，可覆盖重写 | string | - | | title | tooltip | string | 原生 title | | className | 容器 class | string | - | | render | render 函数 | Function | 见 vue 渲染函数 | | clickEvent | 点击事件 | ()=>Promise | 可返回{type, value}, 将会改变当前 node 节点值，也可以不返回 |

事件

| 方法名 | 说明 | 参数 | | ------ | --------- | -------------- | | change | json 变化 | 当前 json 数据 |

slot

| 名称 | 说明 | | ----------- | ---------------------------------------------- | | type-switch | 数据类型切换插槽 | | node-value | 当前节点插槽（自定义类型，需要自定义插槽渲染） |

License

MIT License © 2022 阿乐去买菜（alqmc）