|
11 | 11 | }" |
12 | 12 | @click="handleClick" |
13 | 13 | @mouseover.stop="handleMouseover" |
14 | | - @mouseout.stop="handleMouseout"> |
| 14 | + @mouseout.stop="handleMouseout" |
| 15 | + > |
15 | 16 | <template v-if="showSelectController && selectable"> |
16 | | - <vue-checkbox v-if="isMultiple" v-model="currentCheckboxVal" @change="handleValueChange('checkbox')"></vue-checkbox> |
17 | | - <vue-radio v-else-if="isSingle" v-model="model" @change="handleValueChange('radio')" :path="path"></vue-radio> |
| 17 | + <vue-checkbox |
| 18 | + v-if="isMultiple" |
| 19 | + v-model="currentCheckboxVal" |
| 20 | + @change="handleValueChange('checkbox')" |
| 21 | + /> |
| 22 | + <vue-radio |
| 23 | + v-else-if="isSingle" |
| 24 | + v-model="model" |
| 25 | + :path="path" |
| 26 | + @change="handleValueChange('radio')" |
| 27 | + /> |
18 | 28 | </template> |
19 | 29 |
|
20 | 30 | <template v-if="Array.isArray(data) || isObject(data)"> |
|
24 | 34 | :data="data" |
25 | 35 | :show-length="showLength" |
26 | 36 | :collapsed-on-click-brackets="collapsedOnClickBrackets" |
27 | | - :show-comma="notLastKey"> |
28 | | - <span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key">{{ keyFormatter(currentKey) }}:</span> |
| 37 | + :show-comma="notLastKey" |
| 38 | + > |
| 39 | + <span |
| 40 | + v-if="currentDeep > 1 && !Array.isArray(parentData)" |
| 41 | + class="vjs-key" |
| 42 | + > |
| 43 | + {{ keyFormatter(currentKey) }}: |
| 44 | + </span> |
29 | 45 | </brackets-left> |
30 | 46 |
|
31 | 47 | <!-- 数据内容, data 为对象时, key 表示键名, 为数组时表示索引 --> |
32 | 48 | <div |
33 | 49 | v-for="(item, key) in data" |
34 | 50 | v-show="visible" |
| 51 | + :key="key" |
35 | 52 | :class="{ |
36 | 53 | 'vjs-tree__content': true, |
37 | 54 | 'has-line': showLine |
38 | 55 | }" |
39 | | - :key="key"> |
| 56 | + > |
40 | 57 | <vue-json-pretty |
41 | 58 | v-model="model" |
42 | 59 | :parent-data="data" |
|
57 | 74 | :current-deep="currentDeep + 1" |
58 | 75 | :custom-value-formatter="customValueFormatter" |
59 | 76 | @click="handleItemClick" |
60 | | - @change="handleItemChange"> |
61 | | - </vue-json-pretty> |
| 77 | + @change="handleItemChange" |
| 78 | + /> |
62 | 79 | </div> |
63 | 80 |
|
64 | 81 | <!-- 右闭合 --> |
65 | 82 | <brackets-right |
66 | 83 | :visible.sync="visible" |
67 | 84 | :data="data" |
68 | 85 | :collapsed-on-click-brackets="collapsedOnClickBrackets" |
69 | | - :show-comma="notLastKey"> |
70 | | - </brackets-right> |
| 86 | + :show-comma="notLastKey" |
| 87 | + /> |
71 | 88 | </template> |
72 | 89 |
|
73 | 90 | <simple-text |
|
77 | 94 | :show-comma="notLastKey" |
78 | 95 | :parent-data="parentData" |
79 | 96 | :data="data" |
80 | | - :current-key="currentKey"> |
| 97 | + :current-key="currentKey" |
| 98 | + > |
81 | 99 | <span |
82 | 100 | v-if="parentData && currentKey && !Array.isArray(parentData)" |
83 | 101 | class="vjs-key" |
|
97 | 115 | import { getDataType } from 'src/utils' |
98 | 116 |
|
99 | 117 | export default { |
100 | | - name: 'vue-json-pretty', |
| 118 | + name: 'VueJsonPretty', |
101 | 119 | components: { |
102 | 120 | SimpleText, |
103 | 121 | VueCheckbox, |
|
108 | 126 | props: { |
109 | 127 | /* outer props */ |
110 | 128 | // 当前树的数据 |
111 | | - data: {}, |
| 129 | + data: { |
| 130 | + type: [String, Number, Boolean, Array, Object], |
| 131 | + default: null |
| 132 | + }, |
112 | 133 | // 定义树的深度, 大于该深度的子树将不被展开 |
113 | 134 | deep: { |
114 | 135 | type: Number, |
|
183 | 204 |
|
184 | 205 | /* inner props */ |
185 | 206 | // 当前树的父级数据 |
186 | | - parentData: {}, |
| 207 | + parentData: { |
| 208 | + type: [String, Number, Boolean, Array, Object], |
| 209 | + default: null |
| 210 | + }, |
187 | 211 | // 当前树的深度, 以根节点作为0开始, 所以第一层树的深度为1, 递归逐次递增 |
188 | 212 | currentDeep: { |
189 | 213 | type: Number, |
190 | 214 | default: 1 |
191 | 215 | }, |
192 | 216 | // 当前树的数据 data 为数组时 currentKey 表示索引, 为对象时表示键名 |
193 | | - currentKey: [Number, String] |
| 217 | + currentKey: { |
| 218 | + type: [Number, String], |
| 219 | + default: '' |
| 220 | + } |
194 | 221 | /* outer props */ |
195 | 222 | }, |
196 | 223 | data () { |
|
219 | 246 | let arr = Object.keys(this.parentData) |
220 | 247 | return arr[arr.length - 1] |
221 | 248 | } |
| 249 | + return '' |
222 | 250 | }, |
223 | 251 |
|
224 | 252 | // 是否不是最后一项 |
|
256 | 284 | return error ? 'When selectableType is not null, selectOnClickNode and showSelectController cannot be false at the same time, because this will cause the selection to fail.' : '' |
257 | 285 | } |
258 | 286 | }, |
| 287 | + watch: { |
| 288 | + deep (newVal) { |
| 289 | + this.visible = this.currentDeep <= newVal |
| 290 | + }, |
| 291 | + propsError: { |
| 292 | + handler (message) { |
| 293 | + if (message) { |
| 294 | + throw new Error(`[vue-json-pretty] ${message}`) |
| 295 | + } |
| 296 | + }, |
| 297 | + immediate: true |
| 298 | + } |
| 299 | + }, |
259 | 300 | methods: { |
260 | 301 | handleValueChange (emitType) { |
261 | 302 | if (this.isMultiple && (emitType === 'checkbox' || emitType === 'tree')) { |
|
334 | 375 | // 因为是递归组件，因此错误只对外暴露一次，子组件的错误不再对外传递 |
335 | 376 | errorCaptured () { |
336 | 377 | return false |
337 | | - }, |
338 | | - watch: { |
339 | | - deep (newVal) { |
340 | | - this.visible = this.currentDeep <= newVal |
341 | | - }, |
342 | | - propsError: { |
343 | | - handler (message) { |
344 | | - if (message) { |
345 | | - throw new Error(`[vue-json-pretty] ${message}`) |
346 | | - } |
347 | | - }, |
348 | | - immediate: true |
349 | | - } |
350 | 378 | } |
351 | 379 | } |
352 | 380 | </script> |
0 commit comments