Skip to content

Commit a346cc5

Browse files
leezngleezng
committed
refactor: demo code refactoring.
1 parent 2b0e974 commit a346cc5

File tree

4 files changed

+473
-289
lines changed

4 files changed

+473
-289
lines changed

‎example/App.vue‎

Lines changed: 17 additions & 289 deletions
Original file line numberDiff line numberDiff line change
@@ -2,221 +2,25 @@
22
<div class="example">
33
<div class="example-box">
44
<h2 class="title">
5-
EXAMPLE 1
5+
Basic Use
66
</h2>
7-
<div class="block">
8-
<h3>JSON:</h3>
9-
<textarea v-model="val" />
10-
11-
<h3>Options:</h3>
12-
<div class="options">
13-
<div>
14-
<label>showLength</label>
15-
<input
16-
v-model="showLength"
17-
type="checkbox"
18-
>
19-
</div>
20-
<div>
21-
<label>showLine</label>
22-
<input
23-
v-model="showLine"
24-
type="checkbox"
25-
>
26-
</div>
27-
<div>
28-
<label>showDoubleQuotes</label>
29-
<input
30-
v-model="showDoubleQuotes"
31-
type="checkbox"
32-
>
33-
</div>
34-
<div>
35-
<label>highlightMouseoverNode</label>
36-
<input
37-
v-model="highlightMouseoverNode"
38-
type="checkbox"
39-
>
40-
</div>
41-
<div>
42-
<label>collapsedOnClickBrackets</label>
43-
<input
44-
v-model="collapsedOnClickBrackets"
45-
type="checkbox"
46-
>
47-
</div>
48-
<div>
49-
<label>use custom formatter</label>
50-
<input
51-
v-model="useCustomLinkFormatter"
52-
type="checkbox"
53-
>
54-
</div>
55-
<div>
56-
<label>deep</label>
57-
<select v-model="deep">
58-
<option :value="2">
59-
2
60-
</option>
61-
<option :value="3">
62-
3
63-
</option>
64-
<option :value="4">
65-
4
66-
</option>
67-
</select>
68-
</div>
69-
</div>
70-
</div>
71-
<div class="block">
72-
<h3>vue-json-pretty:</h3>
73-
<vue-json-pretty
74-
:data="data"
75-
:deep="deep"
76-
:show-double-quotes="showDoubleQuotes"
77-
:show-length="showLength"
78-
:show-line="showLine"
79-
:highlight-mouseover-node="highlightMouseoverNode"
80-
:collapsed-on-click-brackets="collapsedOnClickBrackets"
81-
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
82-
@click="handleClick"
83-
/>
84-
</div>
7+
<basic />
858
</div>
869

8710
<div class="example-box">
8811
<h2 class="title">
89-
EXAMPLE 2
12+
Virtual List
9013
</h2>
91-
<div class="block">
92-
<h3>JSON:</h3>
93-
<textarea v-model="val" />
14+
<virtual-list />
15+
</div>
9416

95-
<h3>Options:</h3>
96-
<div class="options">
97-
<div>
98-
<label>selectableType</label>
99-
<select v-model="selectableType">
100-
<option label="-" />
101-
<option>single</option>
102-
<option>multiple</option>
103-
</select>
104-
</div>
105-
<div>
106-
<label>showSelectController</label>
107-
<input
108-
v-model="showSelectController"
109-
type="checkbox"
110-
>
111-
</div>
112-
<div>
113-
<label>selectOnClickNode</label>
114-
<input
115-
v-model="selectOnClickNode"
116-
type="checkbox"
117-
>
118-
</div>
119-
<div>
120-
<label>path</label>
121-
<input
122-
v-model="path"
123-
type="text"
124-
>
125-
</div>
126-
<div>
127-
<label>showLength</label>
128-
<input
129-
v-model="showLength"
130-
type="checkbox"
131-
>
132-
</div>
133-
<div>
134-
<label>showLine</label>
135-
<input
136-
v-model="showLine"
137-
type="checkbox"
138-
>
139-
</div>
140-
<div>
141-
<label>showDoubleQuotes</label>
142-
<input
143-
v-model="showDoubleQuotes"
144-
type="checkbox"
145-
>
146-
</div>
147-
<div>
148-
<label>highlightMouseoverNode</label>
149-
<input
150-
v-model="highlightMouseoverNode"
151-
type="checkbox"
152-
>
153-
</div>
154-
<div>
155-
<label>highlightSelectedNode</label>
156-
<input
157-
v-model="highlightSelectedNode"
158-
type="checkbox"
159-
>
160-
</div>
161-
<div>
162-
<label>collapsedOnClickBrackets</label>
163-
<input
164-
v-model="collapsedOnClickBrackets"
165-
type="checkbox"
166-
>
167-
</div>
168-
<div>
169-
<label>deep</label>
170-
<select v-model="deep">
171-
<option :value="2">
172-
2
173-
</option>
174-
<option :value="3">
175-
3
176-
</option>
177-
<option :value="4">
178-
4
179-
</option>
180-
</select>
181-
</div>
182-
<div>
183-
<label>use custom formatter</label>
184-
<input
185-
v-model="useCustomLinkFormatter"
186-
type="checkbox"
187-
>
188-
</div>
189-
</div>
190-
<h3>v-model:</h3>
191-
<div>{{ value }}</div>
192-
<h3>Current Click:</h3>
193-
<div>path: {{ itemPath }}</div>
194-
<div>data: <pre>{{ itemData }}</pre></div>
195-
</div>
196-
<div class="block">
197-
<h3>vue-json-pretty:</h3>
198-
<vue-json-pretty
199-
v-if="renderOK"
200-
v-model="value"
201-
:data="data"
202-
:path="path"
203-
:deep="deep"
204-
:show-double-quotes="showDoubleQuotes"
205-
:highlight-mouseover-node="highlightMouseoverNode"
206-
:highlight-selected-node="highlightSelectedNode"
207-
:show-length="showLength"
208-
:show-line="showLine"
209-
:select-on-click-node="selectOnClickNode"
210-
:collapsed-on-click-brackets="collapsedOnClickBrackets"
211-
:path-selectable="((path, data) => typeof data !== 'number')"
212-
:selectable-type="selectableType"
213-
:show-select-controller="showSelectController"
214-
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
215-
@click="handleClick(...arguments, 'complexTree')"
216-
@change="handleChange"
217-
/>
218-
</div>
17+
<div class="example-box">
18+
<h2 class="title">
19+
Selecter
20+
</h2>
21+
<select-control />
21922
</div>
23+
22024
<a
22125
style="position: fixed; right: 0; top: 0;"
22226
href="https://github.com/leezng/vue-json-pretty"
@@ -231,92 +35,16 @@
23135
</template>
23236

23337
<script>
234-
import VueJsonPretty from 'src'
235-
236-
const defaultData = {
237-
status: 200,
238-
error: '',
239-
data: [{
240-
news_id: 51184,
241-
title: 'iPhone X Review: Innovative future with real black technology',
242-
source: 'Netease phone'
243-
}, {
244-
news_id: 51183,
245-
title: 'Traffic paradise: How to design streets for people and unmanned vehicles in the future?',
246-
source: 'Netease smart',
247-
link: 'http://netease.smart/traffic-paradise/1235'
248-
}, {
249-
news_id: 51182,
250-
title: 'Teslamask\'s American Business Relations: The government does not pay billions to build factories',
251-
source: 'AI Finance',
252-
members: ['Daniel', 'Mike', 'John']
253-
}]
254-
}
38+
import Basic from './Basic'
39+
import VirtualList from './VirtualList'
40+
import SelectControl from './SelectControl'
25541
25642
export default {
25743
name: 'App',
25844
components: {
259-
VueJsonPretty
260-
},
261-
data () {
262-
return {
263-
renderOK: true,
264-
val: JSON.stringify(defaultData),
265-
data: defaultData,
266-
value: 'res.error',
267-
selectableType: 'single',
268-
showSelectController: true,
269-
showLength: false,
270-
showLine: true,
271-
showDoubleQuotes: true,
272-
highlightMouseoverNode: true,
273-
highlightSelectedNode: true,
274-
selectOnClickNode: true,
275-
collapsedOnClickBrackets: true,
276-
useCustomLinkFormatter: false,
277-
path: 'res',
278-
deep: 3,
279-
itemData: {},
280-
itemPath: '',
281-
}
282-
},
283-
watch: {
284-
val(newVal) {
285-
try {
286-
this.data = JSON.parse(this.val)
287-
} catch (err) {
288-
console.log('JSON ERROR')
289-
}
290-
},
291-
selectableType (newVal) {
292-
this.renderOK = false
293-
if (newVal === 'single') {
294-
this.value = 'res.error'
295-
} else if (newVal === 'multiple') {
296-
this.value = ['res.error', 'res.data[0].title']
297-
}
298-
// 重新渲染, 因为2中情况的v-model格式不同
299-
this.$nextTick(() => {
300-
this.renderOK = true
301-
})
302-
}
303-
},
304-
methods: {
305-
handleClick (path, data, treeName = '') {
306-
console.log('click: ', path, data, treeName)
307-
this.itemPath = path
308-
this.itemData = !data ? data + '' : data // 处理 data = null 的情况
309-
},
310-
handleChange (newVal, oldVal) {
311-
console.log('newVal: ', newVal, ' oldVal: ', oldVal)
312-
},
313-
customLinkFormatter (data, key, path, defaultFormatted) {
314-
if (typeof data === 'string' && data.startsWith('http://')) {
315-
return `<a style="color:red;" href="${data}" target="_blank">"${data}"</a>`;
316-
} else {
317-
return defaultFormatted;
318-
}
319-
}
45+
Basic,
46+
VirtualList,
47+
SelectControl,
32048
}
32149
}
32250
</script>

0 commit comments

Comments
 (0)