33 <div class =" example-box"
44 <h2 class =" title" h2 >
55 <div class =" block"
6- <h3 >JSON Input :</h3 >
6+ <h3 >JSON:</h3 >
77 <textarea v-model =" val" textarea >
8+
9+ <h3 >Options:</h3 >
10+ <div class =" options"
11+ <div >
12+ <label >showLength</label >
13+ <input type =" checkbox" v-model =" showLength"
14+ </div >
15+ <div >
16+ <label >showLine</label >
17+ <input type =" checkbox" v-model =" showLine"
18+ </div >
19+ <div >
20+ <label >showDoubleQuotes</label >
21+ <input type =" checkbox" v-model =" showDoubleQuotes"
22+ </div >
23+ <div >
24+ <label >highlightMouseoverNode</label >
25+ <input type =" checkbox" v-model =" highlightMouseoverNode"
26+ </div >
27+ <div >
28+ <label >deep</label >
29+ <select v-model =" deep"
30+ <option :value =" 2" option >
31+ <option :value =" 3" option >
32+ <option :value =" 4" option >
33+ </select >
34+ </div >
35+ </div >
836 </div >
937 <div class =" block"
10- <h3 >JSON Tree :</h3 >
38+ <h3 >vue-json-pretty :</h3 >
1139 <vue-json-pretty
12- :deep =" deep"
1340 :data =" json"
14- :path =" 'res'"
41+ :deep =" deep"
42+ :show-double-quotes =" showDoubleQuotes"
43+ :show-length =" showLength"
44+ :show-line =" showLine"
45+ :highlight-mouseover-node =" highlightMouseoverNode"
46+ @click =" handleClick"
1547 </vue-json-pretty >
1648 </div >
1749 </div >
1850
1951 <div class =" example-box"
2052 <h2 class =" title" h2 >
2153 <div class =" block"
22- <h3 >JSON Input :</h3 >
54+ <h3 >JSON:</h3 >
2355 <textarea v-model =" val" textarea >
2456
25- <h3 >Options</h3 >
57+ <h3 >Options: </h3 >
2658 <div class =" options"
2759 <div >
28- <label >selectable-type </label >
60+ <label >selectableType </label >
2961 <select v-model =" selectableType"
30- <option >-</option >
31- <option >both</option >
32- <option >checkbox</option >
33- <option >tree</option >
62+ <option label =" -" option >
63+ <option >single</option >
64+ <option >multiple</option >
3465 </select >
3566 </div >
67+ <div >
68+ <label >showSelectController</label >
69+ <input type =" checkbox" v-model =" showSelectController"
70+ </div >
71+ <div >
72+ <label >selectOnClickNode</label >
73+ <input type =" checkbox" v-model =" selectOnClickNode"
74+ </div >
3675 <div >
3776 <label >path</label >
3877 <input type =" text" v-model =" path"
4180 <label >showLength</label >
4281 <input type =" checkbox" v-model =" showLength"
4382 </div >
83+ <div >
84+ <label >showLine</label >
85+ <input type =" checkbox" v-model =" showLine"
86+ </div >
87+ <div >
88+ <label >showDoubleQuotes</label >
89+ <input type =" checkbox" v-model =" showDoubleQuotes"
90+ </div >
91+ <div >
92+ <label >highlightMouseoverNode</label >
93+ <input type =" checkbox" v-model =" highlightMouseoverNode"
94+ </div >
95+ <div >
96+ <label >highlightSelectedNode</label >
97+ <input type =" checkbox" v-model =" highlightSelectedNode"
98+ </div >
4499 <div >
45100 <label >deep</label >
46101 <select v-model =" deep"
50105 </select >
51106 </div >
52107 </div >
53-
54- <h3 >Latest Click Result:</h3 >
108+ <h3 >v-model:</h3 >
109+ <div >{{value}}</div >
110+ <h3 >Current Click:</h3 >
55111 <div >path: {{itemPath}}</div >
56112 <div >data: <pre >{{itemData}}</pre ></div >
57113 </div >
58114 <div class =" block"
59- <h3 >JSON Tree :</h3 >
115+ <h3 >vue-json-pretty :</h3 >
60116 <vue-json-pretty
117+ v-if =" renderOK"
61118 :data =" json"
62119 :path =" path"
63120 :deep =" deep"
121+ :show-double-quotes =" showDoubleQuotes"
122+ :highlight-mouseover-node =" highlightMouseoverNode"
123+ :highlight-selected-node =" highlightSelectedNode"
64124 :show-length =" showLength"
65- :path-checked =" ['res', 'res.c']"
125+ :show-line =" showLine"
126+ :select-on-click-node =" selectOnClickNode"
127+ v-model =" value"
66128 :path-selectable =" ((path, data) => typeof data !== 'number')"
67129 :selectable-type =" selectableType"
68- @click =" handleClick"
130+ :show-select-controller =" showSelectController"
131+ @click =" handleClick(...arguments, 'complexTree')"
132+ @change =" handleChange"
69133 </vue-json-pretty >
70134 </div >
71135 </div >
@@ -83,6 +147,7 @@ export default {
83147 },
84148 data () {
85149 return {
150+ renderOK: true ,
86151 val: ' '
87152 data: {
88153 status: 200 ,
@@ -99,20 +164,41 @@ export default {
99164 news_id: 51182 ,
100165 title: ' Teslamask\' s American Business Relations: The government does not pay billions to build factories'
101166 source: ' AI Finance'
102- members: [' Daniel, Mike, John'
167+ members: [' Daniel' , ' Mike' , ' John'
103168 }]
104169 },
105- selectableType: ' both'
106- showLength: true ,
170+ value: ' res.error'
171+ selectableType: ' single'
172+ showSelectController: true ,
173+ showLength: false ,
174+ showLine: true ,
175+ showDoubleQuotes: true ,
176+ highlightMouseoverNode: true ,
177+ highlightSelectedNode: true ,
178+ selectOnClickNode: true ,
107179 path: ' res'
108- deep: 4 ,
180+ deep: 3 ,
109181 itemData: {},
110182 itemPath: ' '
111183 }
112184 },
113185 created () {
114186 this .val = JSON .stringify (this .data )
115187 },
188+ watch: {
189+ selectableType (newVal ) {
190+ this .renderOK = false
191+ if (newVal === ' single'
192+ this .value = ' res.error'
193+ } else if (newVal === ' multiple'
194+ this .value = [' res.error' ' res.data[0].title'
195+ }
196+ // 重新渲染, 因为2中情况的v-model格式不同
197+ this .$nextTick (() => {
198+ this .renderOK = true
199+ })
200+ }
201+ },
116202 computed: {
117203 json () {
118204 try {
@@ -124,10 +210,13 @@ export default {
124210 }
125211 },
126212 methods: {
127- handleClick (path , data , checked ) {
128- console .log (' click' checked )
213+ handleClick (path , data , treeName = ' '
214+ console .log (' click: ' treeName )
129215 this .itemPath = path
130216 this .itemData = ! data ? data + ' ' : data // 处理 data = null 的情况
217+ },
218+ handleChange (newVal , oldVal ) {
219+ console .log (' newVal: ' ' oldVal: '
131220 }
132221 }
133222}
0 commit comments