Skip to content

Commit c26760e

Browse files
leezngleezng
committed
feat: support renderNodeValue slot.
1 parent c800d0d commit c26760e

File tree

5 files changed

+255
-332
lines changed

5 files changed

+255
-332
lines changed

‎README.md‎

Lines changed: 30 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,29 @@ 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(v-model) | 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(v-model) | Selected data path | string, array | - |
122+
| rootPath | Root data path | string | `root` |
123+
| pathSelectable | Defines whether a path supports selection | (path, content) => boolean | - |
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+
| renderNodeValue | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | - |
130+
| editable | Support editable | boolean | false |
131+
| editableTrigger | Trigger | `click` \| `dblclick` | `click` |
132132

133133
## Events
134134

@@ -139,6 +139,12 @@ plugins: [
139139
| iconClick | triggers when click icon | (collapsed: boolean) |
140140
| selectedChange | triggers when the selected value changed | (newVal, oldVal) |
141141

142+
## Scoped Slots
143+
144+
| Slot Name | Description | Parameters |
145+
| --------------- | ----------------- | ---------------------- |
146+
| renderNodeValue | render node value | { node, defaultValue } |
147+
142148
## Major Contributors
143149

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

‎README.zh_CN.md‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,29 @@
1010

1111
## Props
1212

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

3737
## Events
3838

@@ -42,3 +42,9 @@
4242
| bracketsClick | 点击括号时触发 | (collapsed: boolean) |
4343
| iconClick | 点击图标时触发 | (collapsed: boolean) |
4444
| selectedChange | 选中值发生变化时触发 | (newVal, oldVal) |
45+
46+
## Scoped Slots
47+
48+
| 插槽名 | 描述 | 参数 |
49+
| --------------- | ---------- | ---------------------- |
50+
| renderNodeValue | 渲染节点值 | { node, defaultValue } |

‎example/Basic.vue‎

Lines changed: 24 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
<input v-model="state.collapsedOnClickBrackets" type="checkbox" />
3232
</div>
3333
<div>
34-
<label>use custom formatter</label>
35-
<input v-model="state.useCustomLinkFormatter" type="checkbox" />
34+
<label>useRenderNodeValue</label>
35+
<input v-model="state.useRenderNodeValue" type="checkbox" />
3636
</div>
3737
<div>
3838
<label>deep</label>
@@ -43,12 +43,8 @@
4343
</select>
4444
</div>
4545
<div>
46-
<label>deepCollapseChildren</label>
47-
<input v-model="state.deepCollapseChildren" type="checkbox" />
48-
</div>
49-
<div>
50-
<label>defaultCollapsePath</label>
51-
<input v-model="state.collapsePathPattern" type="input" />
46+
<label>setPathCollapsible</label>
47+
<input v-model="state.setPathCollapsible" type="checkbox" />
5248
</div>
5349
</div>
5450
</div>
@@ -57,17 +53,22 @@
5753
<vue-json-pretty
5854
:data="state.data"
5955
:deep="state.deep"
60-
:deep-collapse-children="state.deepCollapseChildren"
61-
:collapse-path="state.collapsePath"
56+
:path-collapsible="setPathCollapsible ? pathCollapsible : undefined"
6257
:show-double-quotes="state.showDoubleQuotes"
6358
:show-length="state.showLength"
6459
:show-line="state.showLine"
6560
:show-line-number="state.showLineNumber"
6661
:collapsed-on-click-brackets="state.collapsedOnClickBrackets"
67-
:custom-value-formatter="state.useCustomLinkFormatter ? customLinkFormatter : null"
6862
:show-icon="state.showIcon"
6963
style="position: relative"
70-
/>
64+
>
65+
<template v-if="state.useRenderNodeValue" #renderNodeValue="{ node, defaultValue }">
66+
<template v-if="typeof node.content === 'string' && node.content.startsWith('http://')">
67+
<a :href="node.content" target="_blank">{{ node.content }}</a>
68+
</template>
69+
<template v-else>{{ defaultValue }}</template>
70+
</template>
71+
</vue-json-pretty>
7172
</div>
7273
</div>
7374
</template>
@@ -116,20 +117,14 @@ export default defineComponent({
116117
showLineNumber: false,
117118
showDoubleQuotes: true,
118119
collapsedOnClickBrackets: true,
119-
useCustomLinkFormatter: false,
120+
useRenderNodeValue: false,
120121
deep: 4,
121-
deepCollapseChildren: false,
122-
collapsePath: /members/,
123-
collapsePathPattern: 'members',
122+
setPathCollapsible: false,
124123
showIcon: false,
125124
});
126125
127-
const customLinkFormatter = (data, key, path, defaultFormatted) => {
128-
if (typeof data === 'string' && data.startsWith('http://')) {
129-
return `<a style="color:red;" href="${data}" target="_blank">"${data}"</a>`;
130-
} else {
131-
return defaultFormatted;
132-
}
126+
const pathCollapsible = node => {
127+
return node.key === 'members';
133128
};
134129
135130
watch(
@@ -143,21 +138,16 @@ export default defineComponent({
143138
},
144139
);
145140
146-
watch(
147-
() => state.collapsePath,
148-
newVal => {
149-
try {
150-
state.collapsePath = new RegExp(newVal);
151-
} catch (err) {
152-
// console.log('Regexp ERROR');
153-
}
154-
},
155-
);
156-
157141
return {
158142
state,
159-
customLinkFormatter,
143+
pathCollapsible,
160144
};
161145
},
162146
});
163147
</script>
148+
149+
<style scoped>
150+
a {
151+
color: blue;
152+
}
153+
</style>

0 commit comments

Comments
 (0)