Skip to content

Commit e65b0fc

Browse files
leezngleezng
committed
chore: update path to rootPath, and update README.
1 parent 4672859 commit e65b0fc

File tree

4 files changed

+70
-56
lines changed

4 files changed

+70
-56
lines changed

‎README.md‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ The CSS file is included separately and needs to be imported manually. You can e
6666
```vue
6767
<template>
6868
<div>
69-
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick" />
69+
<vue-json-pretty :data="{ key: 'value' }" />
7070
</div>
7171
</template>
7272
@@ -106,29 +106,28 @@ plugins: [
106106

107107
## Props
108108

109-
| Property | Description | Type | Default |
110-
| ------------------------ | ----------------------------------------------- | ---------------------------------------- | ------- |
111-
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112-
| deep | Paths greater than this depth will be collapsed | number | - |
113-
| showLength | Show the length when collapsed | boolean | false |
114-
| showLine | Show the line | boolean | true |
115-
| showLineNumber | Show the line number | boolean | false |
116-
| showIcon | Show the icon | boolean | false |
117-
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118-
| virtual | Use virtual scroll | boolean | false |
119-
| height | The height of list when using virtual | number | 400 |
120-
| itemHeight | The height of node when using virtual | number | 20 |
121-
| selectedValue.sync | Selected data path | string, array | - |
122-
| path | Root data path | string | 'root' |
123-
| pathSelectable | Defines whether a data path supports selection | function(path, content) | - |
124-
| selectableType | Support path select, default none | `multiple`, `single` | - |
125-
| showSelectController | Show the select controller | boolean | false |
126-
| selectOnClickNode | Trigger select when click node | boolean | true |
127-
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128-
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129-
| customValueFormatter | Custom value rendering function | function(data, key, path, defaultResult) | - |
130-
| editable | Support editable | boolean | false |
131-
| editableTrigger | Trigger | `click`, `dblclick` | 'click' |
109+
| Property | Description | Type | Default |
110+
| ------------------------ | ----------------------------------------------- | ----------------------- | ------- |
111+
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112+
| deep | Paths greater than this depth will be collapsed | number | - |
113+
| showLength | Show the length when collapsed | boolean | false |
114+
| showLine | Show the line | boolean | true |
115+
| showLineNumber | Show the line number | boolean | false |
116+
| showIcon | Show the icon | boolean | false |
117+
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118+
| virtual | Use virtual scroll | boolean | false |
119+
| height | The height of list when using virtual | number | 400 |
120+
| itemHeight | The height of node when using virtual | number | 20 |
121+
| selectedValue.sync | Selected data path | string, array | - |
122+
| rootPath | Root data path | string | `root` |
123+
| pathSelectable | Defines whether a data path supports selection | function(path, content) | - |
124+
| selectableType | Support path select, default none | `multiple`, `single` | - |
125+
| showSelectController | Show the select controller | boolean | false |
126+
| selectOnClickNode | Trigger select when click node | boolean | true |
127+
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128+
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129+
| editable | Support editable | boolean | false |
130+
| editableTrigger | Trigger | `click`, `dblclick` | `click` |
132131

133132
## Events
134133

@@ -139,6 +138,12 @@ plugins: [
139138
| icon-click | triggers when click icon | (collapsed: boolean) |
140139
| selected-change | triggers when the selected value changed | (newVal, oldVal) |
141140

141+
## Scoped Slots
142+
143+
| Slot Name | Description | Parameters |
144+
| --------- | ----------------- | ---------------------- |
145+
| nodeValue | render node value | { node, defaultValue } |
146+
142147
## Major Contributors
143148

144149
[![](https://avatars3.githubusercontent.com/u/153197?v=3&s=50)](https://github.com/rchl)

‎README.zh-CN.md‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,28 @@
99

1010
## Props
1111

12-
| 属性 | 说明 | 类型 | 默认值 |
13-
| ------------------------ | ------------------------------ | ---------------------------------------- | ------------- |
14-
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
15-
| deep | 深度，大于该深度的路径将被折叠 | number | Infinity |
16-
| showLength | 在数据折叠的时候展示长度 | boolean | false |
17-
| showLine | 展示标识线 | boolean | true |
18-
| showLineNumber | 展示行计数 | boolean | false |
19-
| showIcon | 展示图标 | boolean | false |
20-
| showDoubleQuotes | 展示 key 名的双引号 | boolean | true |
21-
| virtual | 使用虚拟滚动(大数据量) | boolean | false |
22-
| height | 使用虚拟滚动时，定义总高度 | number | 400 |
23-
| itemHeight | 使用虚拟滚动时，定义节点高度 | number | 20 |
24-
| selectedValue.sync | 双向绑定选中的数据路径 | string, array | string, array |
25-
| path | 定义最顶层数据路径 | string | root |
26-
| pathSelectable | 定义哪些数据路径可以被选择 | function(path, content) | - |
27-
| selectableType | 定义选择功能，默认无 | `multiple`, `single` | - |
28-
| showSelectController | 展示选择器 | boolean | false |
29-
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
30-
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
31-
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
32-
| customValueFormatter | 自定义值渲染 | function(data, key, path, defaultResult) | - |
33-
| editable | 支持可编辑 | boolean | false |
34-
| editableTrigger | 触发编辑的时机 | `click`, `dblclick` | 'click' |
12+
| 属性 | 说明 | 类型 | 默认值 |
13+
| ------------------------ | ------------------------------ | ----------------------- | ------------- |
14+
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
15+
| deep | 深度，大于该深度的路径将被折叠 | number | Infinity |
16+
| showLength | 在数据折叠的时候展示长度 | boolean | false |
17+
| showLine | 展示标识线 | boolean | true |
18+
| showLineNumber | 展示行计数 | boolean | false |
19+
| showIcon | 展示图标 | boolean | false |
20+
| showDoubleQuotes | 展示 key 名的双引号 | boolean | true |
21+
| virtual | 使用虚拟滚动(大数据量) | boolean | false |
22+
| height | 使用虚拟滚动时，定义总高度 | number | 400 |
23+
| itemHeight | 使用虚拟滚动时，定义节点高度 | number | 20 |
24+
| selectedValue.sync | 双向绑定选中的数据路径 | string, array | string, array |
25+
| rootPath | 定义最顶层数据路径 | string | `root` |
26+
| pathSelectable | 定义哪些数据路径可以被选择 | function(path, content) | - |
27+
| selectableType | 定义选择功能，默认无 | `multiple`, `single` | - |
28+
| showSelectController | 展示选择器 | boolean | false |
29+
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
30+
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
31+
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
32+
| editable | 支持可编辑 | boolean | false |
33+
| editableTrigger | 触发编辑的时机 | `click`, `dblclick` | `click` |
3534

3635
## Events
3736

@@ -41,3 +40,9 @@
4140
| brackets-click | 点击括号时触发 | (collapsed: boolean) |
4241
| icon-click | 点击图标时触发 | (collapsed: boolean) |
4342
| selected-change | 选中值发生变化时触发 | (newVal, oldVal) |
43+
44+
## Scoped Slots
45+
46+
| 插槽名 | 描述 | 参数 |
47+
| --------- | ---------- | ---------------------- |
48+
| nodeValue | 渲染节点值 | { node, defaultValue } |

‎example/SelectControl.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
<input v-model="selectOnClickNode" type="checkbox" />
2727
</div>
2828
<div>
29-
<label>path</label>
30-
<input v-model="path" type="text" />
29+
<label>rootPath</label>
30+
<input v-model="rootPath" type="text" />
3131
</div>
3232
<div>
3333
<label>showLength</label>
@@ -77,7 +77,7 @@
7777
v-if="renderOK"
7878
:selected-value.sync="selectedValue"
7979
:data="data"
80-
:path="path"
80+
:root-path="rootPath"
8181
:deep="deep"
8282
:show-double-quotes="showDoubleQuotes"
8383
:highlight-mouseover-node="highlightMouseoverNode"
@@ -150,7 +150,7 @@ export default {
150150
highlightSelectedNode: true,
151151
selectOnClickNode: true,
152152
collapsedOnClickBrackets: true,
153-
path: 'res',
153+
rootPath: 'res',
154154
deep: 3,
155155
node: null,
156156
showIcon: false,

‎src/components/Tree/index.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,11 @@
4646
:style="itemHeight && itemHeight !== 20 ? { lineHeight: `${itemHeight}px` } : {}"
4747
>
4848
<template #value="slotProps">
49-
<slot name="nodeValue" :node="item" :defaultValue="slotProps.defaultValue" />
49+
<slot
50+
name="nodeValue"
51+
:node="slotProps.node"
52+
:defaultValue="slotProps.defaultValue"
53+
/>
5054
</template>
5155
</tree-node>
5256
</div>
@@ -79,7 +83,7 @@ export default {
7983
default: Infinity,
8084
},
8185
// define root path
82-
path: {
86+
rootPath: {
8387
type: String,
8488
default: 'root',
8589
},
@@ -167,7 +171,7 @@ export default {
167171
return {
168172
translateY: 0,
169173
visibleData: null,
170-
hiddenPaths: jsonFlatten(this.data, this.path).reduce((acc, item) => {
174+
hiddenPaths: jsonFlatten(this.data, this.rootPath).reduce((acc, item) => {
171175
const depthComparison = item.level >= this.deep;
172176
if ((item.type === 'objectStart' || item.type === 'arrayStart') && depthComparison) {
173177
return {
@@ -181,7 +185,7 @@ export default {
181185
},
182186
computed: {
183187
originFlatData() {
184-
return jsonFlatten(this.data, this.path);
188+
return jsonFlatten(this.data, this.rootPath);
185189
},
186190
187191
flatData({ originFlatData, hiddenPaths }) {
@@ -334,7 +338,7 @@ export default {
334338
335339
handleValueChange(value, path) {
336340
const newData = cloneDeep(this.data);
337-
const rootPath = this.path;
341+
const rootPath = this.rootPath;
338342
new Function('data', 'val', `data${path.slice(rootPath.length)}=val`)(newData, value);
339343
this.$emit('input', newData);
340344
},

0 commit comments

Comments
 (0)