Skip to content

Commit 9112c91

Browse files
leezngleezng
committed
update Readme and example
1 parent 0c4d77e commit 9112c91

File tree

4 files changed

+81
-31
lines changed

4 files changed

+81
-31
lines changed

‎README.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ A vue 2.x component for rendering JSON data as a tree structure.
1313

1414
- [Demo](https://leezng.github.io/vue-json-pretty)
1515
- [Github](https://github.com/leezng/vue-json-pretty)
16+
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
1617
- [中文文档](./README.zh-CN.md)
1718

1819
## Install
@@ -49,23 +50,28 @@ export default {
4950
## Props
5051

5152
- If you are using only the basic features (JSON pretty), just focus on the `base` properties.
52-
- If you are using advanced features (get item data), you need to focus on the `base` and `advanced` attributes.
53+
- If you are using advanced features (selected), you can use `base` and `advanced` attributes.
5354

5455
| Attribute | Level | Description | Type | Default |
5556
|-------- |-------- |-------- |-------- | -------- |
5657
| data | basic | json data | JSON object | - |
5758
| deep | basic | data depth, data larger than this depth will not be expanded | number | Infinity |
5859
| showLength | basic | whether to show the length when closed | boolean | false |
60+
| showLine | basic | whether to show the line | boolean | true |
61+
| showDoubleQuotes | basic | whether to show doublequotes on key | boolean | true |
62+
| highlightMouseoverNode | basic | highlight current node when mouseover | boolean | false |
63+
| v-model | advanced | defines value when the tree can be selected | string, array | -, [] |
5964
| path | advanced | root data path | string | root |
6065
| pathChecked | advanced | defines the selected data path | array | [] |
6166
| pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
62-
| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: both, checkbox, tree | - |
67+
| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: -, multiple, single | - |
68+
| showSelectController | advanced | whether to show the select controller at left | boolean | false |
69+
| selectOnClickNode | advanced | whether to change selected value when click node | boolean | true |
70+
| highlightSelectedNode | advanced | highlight current node when selected | boolean | true |
6371

6472
## Events
6573

66-
- The following events are base on advanced features.
67-
6874
| Event Name | Description | Callback Parameters |
6975
|---------- |-------- |---------- |
7076
| click | triggered when a data item is clicked | (path, data) |
71-
77+
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |

‎README.zh-CN.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
- [Demo](https://leezng.github.io/vue-json-pretty)
1515
- [Github](https://github.com/leezng/vue-json-pretty)
16+
- [NPM](https://www.npmjs.com/package/vue-json-pretty)
1617
- [English Document](./README.md)
1718

1819
## 安装
@@ -37,6 +38,7 @@ npm install vue-json-pretty -save
3738
```
3839

3940
```js
41+
// 更多用法请见demo页面
4042
import VueJsonPretty from 'vue-json-pretty'
4143

4244
export default {
@@ -49,23 +51,28 @@ export default {
4951
## Props
5052

5153
- 若仅使用基础功能(JSON美化)，只需关注功能级别为 `基础` 的属性。
52-
- 若使用高级功能(数据层级的获取)，需关注 `基础` 与 `高级` 的属性。
54+
- 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。
5355

5456
| 属性 | 级别 | 说明 | 类型 | 默认值 |
5557
|-------- |-------- |-------- |-------- | -------- |
5658
| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
5759
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
5860
| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
61+
| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
62+
| showDoubleQuotes | 基础 | 是否展示key名的双引号 | boolean | true |
63+
| highlightMouseoverNode | 基础 | 是否在mouseover的时候高亮 | boolean | false |
64+
| v-model | 高级 | 双向绑定选中的数据层级 | string, array | -, [] |
5965
| path | 高级 | 定义最顶层数据层级 | string | root |
6066
| pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] |
6167
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - |
62-
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: both, checkbox, tree | - |
68+
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: -, multiple, single | - |
69+
| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
70+
| selectOnClickNode | 高级 | 是否在点击节点的时候触发v-model双向绑定 | boolean | true |
71+
| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
6372

6473
## Events
6574

66-
- 若使用高级功能，下列事件才是有效的。
67-
6875
| 事件名 | 说明 | 回调参数 |
6976
|---------- |-------- |---------- |
7077
| click | 点击某一个数据层级时触发的事件 | (path, data) |
71-
78+
| change | v-model改变的事件(仅在选择模式下可用) | (newVal, oldVal) |

‎example/App.vue

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,46 @@
33
<div class="example-box">
44
<h2 class="title">EXAMPLE 1</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">2</option>
31+
<option :value="3">3</option>
32+
<option :value="4">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"
1546
@click="handleClick">
1647
</vue-json-pretty>
1748
</div>
@@ -20,10 +51,10 @@
2051
<div class="example-box">
2152
<h2 class="title">EXAMPLE 2</h2>
2253
<div class="block">
23-
<h3>JSON Input:</h3>
54+
<h3>JSON:</h3>
2455
<textarea v-model="val"></textarea>
2556

26-
<h3>Options</h3>
57+
<h3>Options:</h3>
2758
<div class="options">
2859
<div>
2960
<label>selectableType</label>
@@ -81,7 +112,7 @@
81112
<div>data: <pre>{{itemData}}</pre></div>
82113
</div>
83114
<div class="block">
84-
<h3>JSON Tree:</h3>
115+
<h3>vue-json-pretty:</h3>
85116
<vue-json-pretty
86117
v-if="renderOK"
87118
:data="json"
@@ -139,14 +170,14 @@ export default {
139170
value: 'res.error',
140171
selectableType: 'single',
141172
showSelectController: true,
142-
showLength: true,
173+
showLength: false,
143174
showLine: true,
144175
showDoubleQuotes: true,
145176
highlightMouseoverNode: true,
146177
highlightSelectedNode: true,
147178
selectOnClickNode: true,
148179
path: 'res',
149-
deep: 4,
180+
deep: 3,
150181
itemData: {},
151182
itemPath: ''
152183
}
@@ -184,8 +215,8 @@ export default {
184215
this.itemPath = path
185216
this.itemData = !data ? data + '' : data // 处理 data = null 的情况
186217
},
187-
handleChange (val) {
188-
console.log('change: ', val)
218+
handleChange (newVal, oldVal) {
219+
console.log('newVal: ', newVal, ' oldVal: ', oldVal)
189220
}
190221
}
191222
}

‎src/components/app.vue

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@
208208
209209
// 当前的树是否支持选中功能
210210
selectable () {
211-
return this.pathSelectable(this.path, this.data)
211+
return this.pathSelectable(this.path, this.data) && (this.isMultiple || this.isSingle)
212212
},
213213
214214
// 多选模式
@@ -243,9 +243,12 @@
243243
*/
244244
handleClick (e, emitType = '') {
245245
this.$emit('click', this.path, this.data)
246+
if (!this.selectable) return
247+
246248
if (this.isMultiple && (emitType === 'checkbox' || (this.selectOnClickNode && emitType === 'tree'))) {
247249
// handle multiple
248250
const index = this.model.findIndex(item => item === this.path)
251+
const oldVal = [...this.model]
249252
if (index !== -1) {
250253
this.model.splice(index, 1)
251254
} else {
@@ -255,12 +258,14 @@
255258
if (emitType !== 'checkbox') {
256259
this.currentCheckboxVal = !this.currentCheckboxVal
257260
}
258-
this.$emit('change', this.currentCheckboxVal)
261+
this.$emit('change', this.model, oldVal)
259262
} else if (this.isSingle && (emitType === 'radio' || (this.selectOnClickNode && emitType === 'tree'))) {
260263
// handle single
261264
if (this.model !== this.path) {
262-
this.model = this.path
263-
this.$emit('change', this.model)
265+
const oldVal = this.model
266+
const newVal = this.path
267+
this.model = newVal
268+
this.$emit('change', newVal, oldVal)
264269
}
265270
}
266271
},
@@ -271,19 +276,20 @@
271276
},
272277
273278
// handle children's change, and propagation
274-
handleItemChange (val) {
275-
// 存在选择的时候change事件才有意义
276-
if (this.selectableType) {
277-
this.$emit('change', val)
279+
handleItemChange (newVal, oldVal) {
280+
// 可选的时候change事件才有意义
281+
if (this.selectable) {
282+
this.$emit('change', newVal, oldVal)
278283
}
279284
},
280285
281286
handleMouseover () {
282-
this.highlightMouseoverNode && this.selectable && (this.isMouseover = true)
287+
// 可选择的树|普通展示树, 都支持mouseover
288+
this.highlightMouseoverNode && (this.selectable || this.selectableType === '') && (this.isMouseover = true)
283289
},
284290
285291
handleMouseout () {
286-
this.highlightMouseoverNode && this.selectable && (this.isMouseover = false)
292+
this.highlightMouseoverNode && (this.selectable || this.selectableType === '') && (this.isMouseover = false)
287293
},
288294
289295
// 是否对象

0 commit comments

Comments
 (0)