Skip to content

Commit 435727a

Browse files
leezngleezng
committed
chore: update example.
1 parent 0a09645 commit 435727a

File tree

6 files changed

+290
-61
lines changed

6 files changed

+290
-61
lines changed

‎example/App.tsx‎

Lines changed: 68 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,82 @@
1-
import { defineComponent } from 'vue';
1+
import { defineComponent, reactive } from 'vue';
22
import Basic from './Basic.vue';
33
import VirtualList from './VirtualList.vue';
44
import SelectControl from './SelectControl.vue';
5+
import Editable from './Editable.vue';
56
import './styles.less';
67

8+
const list = [
9+
{
10+
title: 'Basic Use',
11+
key: 'basic',
12+
component: Basic,
13+
},
14+
{
15+
title: 'Virtual List',
16+
key: 'virtual-list',
17+
component: VirtualList,
18+
},
19+
{
20+
title: 'Selector',
21+
key: 'select-control',
22+
component: SelectControl,
23+
},
24+
{
25+
title: 'Editable',
26+
key: 'editable',
27+
component: Editable,
28+
},
29+
];
30+
731
export default defineComponent({
32+
setup() {
33+
const state = reactive({
34+
activeKey: list[0].key,
35+
opened: [list[0].key],
36+
});
37+
38+
const onActiveChange = (key: string) => {
39+
state.activeKey = key;
40+
};
41+
42+
return {
43+
state,
44+
onActiveChange,
45+
};
46+
},
47+
848
render() {
9-
const list = [
10-
{
11-
title: 'Basic Use',
12-
key: 'basic',
13-
component: <Basic />,
14-
},
15-
{
16-
title: 'Virtual List',
17-
key: 'virtual-list',
18-
component: <VirtualList />,
19-
},
20-
{
21-
title: 'Selector',
22-
key: 'select-control',
23-
component: <SelectControl />,
24-
},
25-
];
49+
const { state, onActiveChange } = this;
2650

2751
return (
2852
<div class="example">
29-
{list.map(item => (
30-
<div class="example-box" id={item.key}>
31-
<h2 class="title">{item.title}</h2>
32-
{item.component}
53+
<h1>Vue Json Pretty</h1>
54+
<p>
55+
Welcome to the demo space of Vue Json Pretty, here we provide the following different
56+
usage scenarios, try to click on different tab panel to browse.
57+
</p>
58+
59+
<div class="tabs">
60+
<div class="tabs-header">
61+
{list.map(({ title, key }) => (
62+
<div
63+
key={key}
64+
class={`tabs-header-item ${key === state.activeKey ? 'is-active' : ''}`}
65+
onClick={() => onActiveChange(key)}
66+
>
67+
{title}
68+
</div>
69+
))}
70+
</div>
71+
72+
<div class="tabs-content">
73+
{list.map(({ component: Component, key }) => (
74+
<div key={key} style={{ display: `${key === state.activeKey ? 'block' : 'none'}` }}>
75+
{key === state.activeKey || state.opened.includes(key) ? <Component /> : null}
76+
</div>
77+
))}
3378
</div>
34-
))}
79+
</div>
3580

3681
<a
3782
style="position: fixed; right: 0; top: 0;"

‎example/Basic.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<template>
2-
<div>
2+
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
55
<textarea v-model="state.val" />
66

77
<h3>Options:</h3>
88
<div class="options">
9+
<div>
10+
<label>showIcon</label>
11+
<input v-model="state.showIcon" type="checkbox" />
12+
</div>
913
<div>
1014
<label>showLength</label>
1115
<input v-model="state.showLength" type="checkbox" />
@@ -49,13 +53,14 @@
4953
<vue-json-pretty
5054
:data="state.data"
5155
:deep="state.deep"
52-
:deepCollapseChildren="state.deepCollapseChildren"
53-
:collapsePath="state.collapsePath"
56+
:deep-collapse-children="state.deepCollapseChildren"
57+
:collapse-path="state.collapsePath"
5458
:show-double-quotes="state.showDoubleQuotes"
5559
:show-length="state.showLength"
5660
:show-line="state.showLine"
5761
:collapsed-on-click-brackets="state.collapsedOnClickBrackets"
5862
:custom-value-formatter="state.useCustomLinkFormatter ? customLinkFormatter : null"
63+
:show-icon="state.showIcon"
5964
/>
6065
</div>
6166
</div>
@@ -112,6 +117,7 @@ export default defineComponent({
112117
deepCollapseChildren: false,
113118
collapsePath: /members/,
114119
collapsePathPattern: 'members',
120+
showIcon: false,
115121
});
116122
117123
const customLinkFormatter = (data, key, path, defaultFormatted) => {

‎example/Editable.vue‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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>showDoubleQuotes</label>
19+
<input v-model="state.showDoubleQuotes" 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="state.showDoubleQuotes"
48+
:show-length="state.showLength"
49+
:show-line="state.showLine"
50+
:editable="state.editable"
51+
:editable-trigger="state.editableTrigger"
52+
/>
53+
</div>
54+
</div>
55+
</template>
56+
57+
<script>
58+
import { defineComponent, reactive, watch } from 'vue';
59+
import VueJsonPretty from 'src';
60+
61+
const defaultData = {
62+
status: 200,
63+
error: '',
64+
data: [
65+
{
66+
news_id: 51184,
67+
title: 'iPhone X Review: Innovative future with real black technology',
68+
source: 'Netease phone',
69+
},
70+
{
71+
news_id: 51183,
72+
title:
73+
'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
74+
source: 'Netease smart',
75+
link: 'http://netease.smart/traffic-paradise/1235',
76+
},
77+
{
78+
news_id: 51182,
79+
title:
80+
"Teslamask's American Business Relations: The government does not pay billions to build factories",
81+
source: 'AI Finance',
82+
members: ['Daniel', 'Mike', 'John'],
83+
},
84+
],
85+
};
86+
87+
export default defineComponent({
88+
name: 'SelectControl',
89+
components: {
90+
VueJsonPretty,
91+
},
92+
setup() {
93+
const state = reactive({
94+
val: JSON.stringify(defaultData),
95+
data: defaultData,
96+
showLength: false,
97+
showLine: true,
98+
showDoubleQuotes: true,
99+
editable: true,
100+
editableTrigger: 'click',
101+
deep: 3,
102+
});
103+
104+
watch(
105+
() => state.val,
106+
newVal => {
107+
try {
108+
state.data = JSON.parse(newVal);
109+
} catch (err) {
110+
// console.log('JSON ERROR');
111+
}
112+
},
113+
);
114+
115+
watch(
116+
() => state.data,
117+
newVal => {
118+
try {
119+
state.val = JSON.stringify(newVal);
120+
} catch (err) {
121+
// console.log('JSON ERROR');
122+
}
123+
},
124+
);
125+
126+
return {
127+
state,
128+
};
129+
},
130+
});
131+
</script>

‎example/SelectControl.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
55
<textarea v-model="state.val" />
@@ -58,8 +58,8 @@
5858
<input v-model="state.useCustomLinkFormatter" type="checkbox" />
5959
</div>
6060
</div>
61-
<h3>v-model:</h3>
62-
<div>{{ state.value }}</div>
61+
<h3>v-model:selectedValue:</h3>
62+
<div>{{ state.selectedValue }}</div>
6363
<h3>Current Click:</h3>
6464
<div>path: {{ state.itemPath }}</div>
6565
<div>
@@ -71,7 +71,7 @@
7171
<h3>vue-json-pretty:</h3>
7272
<vue-json-pretty
7373
v-if="state.renderOK"
74-
v-model="state.value"
74+
v-model:selectedValue="state.selectedValue"
7575
:data="state.data"
7676
:path="state.path"
7777
:deep="state.deep"
@@ -85,8 +85,8 @@
8585
:selectable-type="state.selectableType"
8686
:show-select-controller="state.showSelectController"
8787
:custom-value-formatter="state.useCustomLinkFormatter ? customLinkFormatter : null"
88-
@click="handleClick"
89-
@change="handleChange"
88+
@nodeClick="handleClick"
89+
@selectedChange="handleChange"
9090
/>
9191
</div>
9292
</div>
@@ -132,7 +132,7 @@ export default defineComponent({
132132
renderOK: true,
133133
val: JSON.stringify(defaultData),
134134
data: defaultData,
135-
value: 'res.error',
135+
selectedValue: 'res.error',
136136
selectableType: 'single',
137137
showSelectController: true,
138138
showLength: false,
@@ -151,7 +151,7 @@ export default defineComponent({
151151
const handleClick = (path, data) => {
152152
// console.log('click: ', path, data);
153153
state.itemPath = path;
154-
state.itemData = !data ? data + '' : data; // 处理 data = null 的情况
154+
state.itemData = !data ? data + '' : data; // if data = null
155155
};
156156
157157
const handleChange = () => {
@@ -182,11 +182,11 @@ export default defineComponent({
182182
async newVal => {
183183
state.renderOK = false;
184184
if (newVal === 'single') {
185-
state.value = 'res.error';
185+
state.selectedValue = 'res.error';
186186
} else if (newVal === 'multiple') {
187-
state.value = ['res.error', 'res.data[0].title'];
187+
state.selectedValue = ['res.error', 'res.data[0].title'];
188188
}
189-
// 重新渲染, 因为2中情况的v-model格式不同
189+
// Re-render because v-model:selectedValue format is different in case 2
190190
await nextTick();
191191
state.renderOK = true;
192192
},

‎example/VirtualList.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="example-box">
33
<div class="block">
44
<h3>JSON:</h3>
55
<textarea v-model="state.val" />
@@ -31,7 +31,7 @@
3131
<div class="block">
3232
<h3>vue-json-pretty(1000+ items):</h3>
3333
<vue-json-pretty
34-
style="height:400px"
34+
style="height: 400px"
3535
:virtual="true"
3636
:virtualLines="+state.virtualLines"
3737
:data="state.data"
@@ -50,12 +50,16 @@ import VueJsonPretty from 'src';
5050
const defaultData = {
5151
status: 200,
5252
error: '',
53-
data: Array.from(Array(1000)).map((item, index) => ({
54-
news_id: index,
53+
data: [],
54+
};
55+
56+
for (let i = 0; i < 100000; i++) {
57+
defaultData.data.push({
58+
news_id: i,
5559
title: 'iPhone X Review: Innovative future with real black technology',
5660
source: 'Netease phone',
57-
})),
58-
};
61+
});
62+
}
5963
6064
export default defineComponent({
6165
name: 'VirtualList',

0 commit comments

Comments
 (0)