Skip to content

Commit 83c3aaa

Browse files
committed
update readme
1 parent 2a22f7a commit 83c3aaa

File tree

2 files changed

+30
-17
lines changed

2 files changed

+30
-17
lines changed

README.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66

77
A vue 2.x component for rendering JSON data as a tree structure.
88

9+
- basic: JSON pretty
10+
- advanced: get item data from JSON
11+
912
## Links
1013

1114
- [Demo](https://leezng.github.io/vue-json-pretty)
@@ -45,16 +48,22 @@ export default {
4548

4649
## Props
4750

48-
| Attribute | Description | Type | Default |
51+
- If you are using only the basic features (JSON pretty), just focus on the `base` properties.
52+
- If you are using advanced features (get item data), you need to focus on the `base` and `advanced` attributes.
53+
54+
| Attribute | Level | Description | Type | Default |
4955
|-------- |-------- |-------- | -------- |
50-
| data | json data | JSON object | - |
51-
| path | root data path | string | root |
52-
| pathChecked | defines the selected data path | array | [] |
53-
| pathSelectable | defines whether a data path supports selection | Function(itemPath, itemData) | - |
54-
| selectableType | defines the selected type, this feature is not supported by default | enum: both, checkbox, tree | - |
56+
| data | basic | json data | JSON object | - |
57+
| deep | basic |data depth, data larger than this depth will not be expanded | number | Infinity |
58+
| path | advanced | root data path | string | root |
59+
| pathChecked | advanced | defines the selected data path | array | [] |
60+
| pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
61+
| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: both, checkbox, tree | - |
5562

5663
## Events
5764

65+
- The following events are base on advanced features.
66+
5867
| Event Name | Description | Callback Parameters |
5968
|---------- |-------- |---------- |
6069
| click | triggered when a data item is clicked | (path, data) |

README.zh-CN.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66

77
一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件
88

9-
- 基本功能: JSON 的美化
10-
- 附加功能: JSON 数据对应层级数据的点击获取
9+
- 基础功能: JSON 的美化
10+
- 高级功能: JSON 数据对应层级数据的获取
1111

1212
## 链接
1313

@@ -18,7 +18,7 @@
1818
## 安装
1919

2020
```js
21-
npm install vue-json-pretty
21+
npm install vue-json-pretty -save
2222
```
2323

2424
## 快速开始
@@ -48,18 +48,22 @@ export default {
4848

4949
## Props
5050

51-
若仅使用 `JSON` 美化功能,只需传入 `data` 属性即可。
51+
- 若仅使用基础功能(JSON美化),只需关注功能级别为 `基础` 的属性。
52+
- 若使用高级功能(数据层级的获取),需关注 `基础``高级` 的属性。
5253

53-
| 属性 | 说明 | 类型 | 默认值 |
54-
|-------- |-------- |-------- | -------- |
55-
| data | 待美化的源数据,注意不是 `JSON` 字符串 | `JSON` 对象 | - |
56-
| path | 定义最顶层数据层级 | string | root |
57-
| pathChecked | 定义哪些数据层级是已被选中的 | array | [] |
58-
| pathSelectable | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |
59-
| selectableType | 定义组件支持的选中方式,默认无选中功能 | enum: both, checkbox, tree | - |
54+
| 属性 | 功能级别 | 说明 | 类型 | 默认值 |
55+
|-------- |-------- |-------- |-------- | -------- |
56+
| data | 基础 | 待美化的源数据,注意不是 `JSON` 字符串 | `JSON` 对象 | - |
57+
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
58+
| path | 高级 | 定义最顶层数据层级 | string | root |
59+
| pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] |
60+
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |
61+
| selectableType | 高级 | 定义组件支持的选中方式,默认无选中功能 | enum: both, checkbox, tree | - |
6062

6163
## Events
6264

65+
- 若使用高级功能,下列事件才是有效的。
66+
6367
| 事件名 | 说明 | 回调参数 |
6468
|---------- |-------- |---------- |
6569
| click | 点击某一个数据层级时触发的事件 | (path, data) |

0 commit comments

Comments
 (0)