1.1.0 • Published 3 years ago
极简的 jsonEditor 插件
安装
# pnpm
pnpm add vue-simple-json
# yarn
yarn add vue-simple-json
# npm
npm install 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 属性
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）