Skip to content

Commit b7b6da7

Browse files
leezngleezng
committed
feat: support showIcon and showLineNumber.
1 parent dd893ba commit b7b6da7

File tree

10 files changed

+321
-65
lines changed

10 files changed

+321
-65
lines changed

‎example/Basic.vue‎

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

77
<h3>Options:</h3>
88
<div class="options">
9+
<div>
10+
<label>showIcon</label>
11+
<input v-model="showIcon" type="checkbox" />
12+
</div>
913
<div>
1014
<label>showLength</label>
1115
<input v-model="showLength" type="checkbox" />
@@ -14,6 +18,10 @@
1418
<label>showLine</label>
1519
<input v-model="showLine" type="checkbox" />
1620
</div>
21+
<div>
22+
<label>showLineNumber</label>
23+
<input v-model="showLineNumber" type="checkbox" />
24+
</div>
1725
<div>
1826
<label>showDoubleQuotes</label>
1927
<input v-model="showDoubleQuotes" type="checkbox" />
@@ -33,15 +41,9 @@
3341
<div>
3442
<label>deep</label>
3543
<select v-model="deep">
36-
<option :value="2">
37-
2
38-
</option>
39-
<option :value="3">
40-
3
41-
</option>
42-
<option :value="4">
43-
4
44-
</option>
44+
<option :value="2">2</option>
45+
<option :value="3">3</option>
46+
<option :value="4">4</option>
4547
</select>
4648
</div>
4749
<div>
@@ -59,9 +61,12 @@
5961
:show-double-quotes="showDoubleQuotes"
6062
:show-length="showLength"
6163
:show-line="showLine"
64+
:show-line-number="showLineNumber"
6265
:highlight-mouseover-node="highlightMouseoverNode"
6366
:collapsed-on-click-brackets="collapsedOnClickBrackets"
6467
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
68+
:show-icon="showIcon"
69+
style="position: relative"
6570
/>
6671
</div>
6772
</div>
@@ -97,7 +102,7 @@ const defaultData = {
97102
};
98103
99104
export default {
100-
name: 'App',
105+
name: 'Basic',
101106
components: {
102107
VueJsonPretty,
103108
},
@@ -107,18 +112,20 @@ export default {
107112
data: defaultData,
108113
showLength: false,
109114
showLine: true,
115+
showLineNumber: false,
110116
showDoubleQuotes: true,
111117
highlightMouseoverNode: true,
112118
collapsedOnClickBrackets: true,
113119
useCustomLinkFormatter: false,
114120
deep: 3,
115121
deepCollapseChildren: false,
122+
showIcon: false,
116123
};
117124
},
118125
watch: {
119126
val(newVal) {
120127
try {
121-
this.data = JSON.parse(this.val);
128+
this.data = JSON.parse(newVal);
122129
} catch (err) {
123130
console.log('JSON ERROR');
124131
}

‎example/Editable.vue‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<template>
2+
<div class="example-box">
3+
<div class="block">
4+
<h3>JSON:</h3>
5+
<textarea v-model="state.val" />
6+
7+
<h3>Options:</h3>
8+
<div class="options">
9+
<div>
10+
<label>showLength</label>
11+
<input v-model="state.showLength" type="checkbox" />
12+
</div>
13+
<div>
14+
<label>showLine</label>
15+
<input v-model="state.showLine" type="checkbox" />
16+
</div>
17+
<div>
18+
<label>showLineNumber</label>
19+
<input v-model="state.showLineNumber" type="checkbox" />
20+
</div>
21+
<div>
22+
<label>editable</label>
23+
<input v-model="state.editable" type="checkbox" />
24+
</div>
25+
<div>
26+
<label>editableTrigger</label>
27+
<select v-model="state.editableTrigger">
28+
<option value="click">click</option>
29+
<option value="dblclick">dblclick</option>
30+
</select>
31+
</div>
32+
<div>
33+
<label>deep</label>
34+
<select v-model="state.deep">
35+
<option :value="2">2</option>
36+
<option :value="3">3</option>
37+
<option :value="4">4</option>
38+
</select>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="block">
43+
<h3>vue-json-pretty:</h3>
44+
<vue-json-pretty
45+
v-model:data="state.data"
46+
:deep="state.deep"
47+
:show-double-quotes="true"
48+
:show-length="state.showLength"
49+
:show-line="state.showLine"
50+
:show-line-number="state.showLineNumber"
51+
:editable="state.editable"
52+
:editable-trigger="state.editableTrigger"
53+
/>
54+
</div>
55+
</div>
56+
</template>
57+
58+
<script>
59+
import { defineComponent, reactive, watch } from 'vue';
60+
import VueJsonPretty from 'src';
61+
62+
const defaultData = {
63+
status: 200,
64+
error: '',
65+
data: [
66+
{
67+
news_id: 51184,
68+
title: 'iPhone X Review: Innovative future with real black technology',
69+
source: 'Netease phone',
70+
},
71+
{
72+
news_id: 51183,
73+
title:
74+
'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
75+
source: 'Netease smart',
76+
link: 'http://netease.smart/traffic-paradise/1235',
77+
},
78+
{
79+
news_id: 51182,
80+
title:
81+
"Teslamask's American Business Relations: The government does not pay billions to build factories",
82+
source: 'AI Finance',
83+
members: ['Daniel', 'Mike', 'John'],
84+
},
85+
],
86+
};
87+
88+
export default defineComponent({
89+
name: 'Editable',
90+
components: {
91+
VueJsonPretty,
92+
},
93+
setup() {
94+
const state = reactive({
95+
val: JSON.stringify(defaultData),
96+
data: defaultData,
97+
showLength: false,
98+
showLine: true,
99+
showLineNumber: false,
100+
editable: true,
101+
editableTrigger: 'click',
102+
deep: 3,
103+
});
104+
105+
watch(
106+
() => state.val,
107+
newVal => {
108+
try {
109+
state.data = JSON.parse(newVal);
110+
} catch (err) {
111+
// console.log('JSON ERROR');
112+
}
113+
},
114+
);
115+
116+
watch(
117+
() => state.data,
118+
newVal => {
119+
try {
120+
state.val = JSON.stringify(newVal);
121+
} catch (err) {
122+
// console.log('JSON ERROR');
123+
}
124+
},
125+
);
126+
127+
return {
128+
state,
129+
};
130+
},
131+
});
132+
</script>

‎example/SelectControl.vue‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66

77
<h3>Options:</h3>
88
<div class="options">
9+
<div>
10+
<label>showIcon</label>
11+
<input v-model="showIcon" type="checkbox" />
12+
</div>
913
<div>
1014
<label>selectableType</label>
1115
<select v-model="selectableType">
@@ -33,6 +37,10 @@
3337
<label>showLine</label>
3438
<input v-model="showLine" type="checkbox" />
3539
</div>
40+
<div>
41+
<label>showLineNumber</label>
42+
<input v-model="showLineNumber" type="checkbox" />
43+
</div>
3644
<div>
3745
<label>showDoubleQuotes</label>
3846
<input v-model="showDoubleQuotes" type="checkbox" />
@@ -57,10 +65,6 @@
5765
<option :value="4">4</option>
5866
</select>
5967
</div>
60-
<div>
61-
<label>use custom formatter</label>
62-
<input v-model="useCustomLinkFormatter" type="checkbox" />
63-
</div>
6468
</div>
6569
<h3>v-model:</h3>
6670
<div>{{ value }}</div>
@@ -84,14 +88,15 @@
8488
:highlight-selected-node="highlightSelectedNode"
8589
:show-length="showLength"
8690
:show-line="showLine"
91+
:show-line-number="showLineNumber"
8792
:select-on-click-node="selectOnClickNode"
8893
:collapsed-on-click-brackets="collapsedOnClickBrackets"
8994
:path-selectable="(path, data) => typeof data !== 'number'"
9095
:selectable-type="selectableType"
9196
:show-select-controller="showSelectController"
92-
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
93-
@click="handleClick(...arguments, 'complexTree')"
94-
@change="handleChange"
97+
:show-icon="showIcon"
98+
@node-click="handleClick(...arguments, 'complexTree')"
99+
@selected-change="handleChange"
95100
/>
96101
</div>
97102
</div>
@@ -127,7 +132,7 @@ const defaultData = {
127132
};
128133
129134
export default {
130-
name: 'App',
135+
name: 'SelectControl',
131136
components: {
132137
VueJsonPretty,
133138
},
@@ -141,16 +146,17 @@ export default {
141146
showSelectController: true,
142147
showLength: false,
143148
showLine: true,
149+
showLineNumber: false,
144150
showDoubleQuotes: true,
145151
highlightMouseoverNode: true,
146152
highlightSelectedNode: true,
147153
selectOnClickNode: true,
148154
collapsedOnClickBrackets: true,
149-
useCustomLinkFormatter: false,
150155
path: 'res',
151156
deep: 3,
152157
itemData: {},
153158
itemPath: '',
159+
showIcon: false,
154160
};
155161
},
156162
watch: {
@@ -168,28 +174,21 @@ export default {
168174
} else if (newVal === 'multiple') {
169175
this.value = ['res.error', 'res.data[0].title'];
170176
}
171-
// 重新渲染, 因为2中情况的v-model格式不同
177+
// Re-render because v-model:selectedValue format is different in case 2
172178
this.$nextTick(() => {
173179
this.renderOK = true;
174180
});
175181
},
176182
},
177183
methods: {
178184
handleClick(path, data, treeName = '') {
179-
console.log('click: ', path, data, treeName);
185+
// console.log('click: ', path, data, treeName);
180186
this.itemPath = path;
181187
this.itemData = !data ? data + '' : data; // 处理 data = null 的情况
182188
},
183189
handleChange(newVal, oldVal) {
184190
console.log('newVal: ', newVal, ' oldVal: ', oldVal);
185191
},
186-
customLinkFormatter(data, key, path, defaultFormatted) {
187-
if (typeof data === 'string' && data.startsWith('http://')) {
188-
return `<a style="color:red;" href="${data}" target="_blank">"${data}"</a>`;
189-
} else {
190-
return defaultFormatted;
191-
}
192-
},
193192
},
194193
};
195194
</script>

‎example/VirtualList.vue‎

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

77
<h3>Options:</h3>
88
<div class="options">
9+
<div>
10+
<label>itemHeight</label>
11+
<input v-model="itemHeight" type="number" />
12+
</div>
913
<div>
1014
<label>showLine</label>
1115
<input v-model="showLine" type="checkbox" />
@@ -17,24 +21,18 @@
1721
<div>
1822
<label>deep</label>
1923
<select v-model="deep">
20-
<option :value="2">
21-
2
22-
</option>
23-
<option :value="3">
24-
3
25-
</option>
26-
<option :value="4">
27-
4
28-
</option>
24+
<option :value="2">2</option>
25+
<option :value="3">3</option>
26+
<option :value="4">4</option>
2927
</select>
3028
</div>
3129
</div>
3230
</div>
3331
<div class="block">
3432
<h3>vue-json-pretty(1000+ items):</h3>
3533
<vue-json-pretty
36-
style="height: 200px"
3734
:virtual="true"
35+
:item-height="+itemHeight"
3836
:data="data"
3937
:deep="deep"
4038
:show-line="showLine"
@@ -58,7 +56,7 @@ const defaultData = {
5856
};
5957
6058
export default {
61-
name: 'App',
59+
name: 'VirtualList',
6260
components: {
6361
VueJsonPretty,
6462
},
@@ -69,12 +67,13 @@ export default {
6967
showLine: true,
7068
collapsedOnClickBrackets: true,
7169
deep: 3,
70+
itemHeight: 20,
7271
};
7372
},
7473
watch: {
7574
val(newVal) {
7675
try {
77-
this.data = JSON.parse(this.val);
76+
this.data = JSON.parse(newVal);
7877
} catch (err) {
7978
console.log('JSON ERROR');
8079
}

0 commit comments

Comments
 (0)