Skip to content

Commit 46af3f3

Browse files
leezngleezng
committed
chore: code optimization.
1 parent 2c7af4a commit 46af3f3

File tree

10 files changed

+136
-134
lines changed

10 files changed

+136
-134
lines changed

‎README.md‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ English | [简体中文](./README.zh_CN.md)
3030
## Features
3131

3232
- As a JSON Formatter.
33-
- Get item data from JSON.
33+
- Support get item data from JSON.
3434
- Support big data.
35+
- Support editable.
3536

3637
## Environment Support
3738

@@ -45,11 +46,17 @@ English | [简体中文](./README.zh_CN.md)
4546
## Using NPM or Yarn
4647

4748
```bash
48-
$ npm install vue-json-pretty --save
49+
$ npm install vue-json-pretty@v1-latest --save
50+
```
51+
52+
```bash
53+
$ yarn add vue-json-pretty@v1-latest
4954
```
5055

56+
## Use Vue3
57+
5158
```bash
52-
$ yarn add vue-json-pretty
59+
$ npm install vue-json-pretty --save
5360
```
5461

5562
## Usage
@@ -59,7 +66,7 @@ The CSS file is included separately and needs to be imported manually. You can e
5966
```vue
6067
<template>
6168
<div>
62-
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> </vue-json-pretty>
69+
<vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick" />
6370
</div>
6471
</template>
6572
@@ -99,36 +106,38 @@ plugins: [
99106

100107
## Props
101108

102-
- If you are using only the normal features (JSON pretty), just focus on the `base` properties.
103-
- If you are using higher features (Get data), you can use `base` and `higher` attributes.
104-
105-
| Attribute | Level | Description | Type | Default |
106-
| ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- |
107-
| data | normal | JSON data | JSON object | - |
108-
| deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity |
109-
| deepCollapseChildren | normal | Whether children collapsed by `deep` prop should also be collapsed | boolean | false |
110-
| showLength | normal | Whether to show the length when closed | boolean | false |
111-
| showLine | normal | Whether to show the line | boolean | true |
112-
| showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |
113-
| virtual | normal | Whether to use virtual scrolling, usually used for big data | boolean | false |
114-
| itemHeight | normal | The height of each item when using virtual scrolling | number | auto |
115-
| virtualLines | normal | The number of lines to render when virtual scrolling is enabled | number | 10 |
116-
| v-model | higher | Defines value when the tree can be selected | string, array | - |
117-
| path | higher | Root data path | string | root |
118-
| pathSelectable | higher | Defines whether a data path supports selection | function(path, content) | - |
119-
| selectableType | higher | Defines the selected type, this feature is not supported by default | multiple, single | - |
120-
| showSelectController | higher | Whether to show the select controller at left | boolean | false |
121-
| selectOnClickNode | higher | Whether to change selected value when click node | boolean | true |
122-
| highlightSelectedNode | higher | Highlight current node when selected | boolean | true |
123-
| collapsedOnClickBrackets | higher | Collapsed control | boolean | true |
124-
| customValueFormatter | higher | A function that can return different html or strings to display for values in the data. | function(data, key, path, defaultFormatResult) | - |
109+
| Property | Description ｜ Type | Default |
110+
| ------------------------ | ----------------------------------------------- | ---------------------------------------- |
111+
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112+
| deep | Paths greater than this depth will be collapsed | number | - |
113+
| showLength | Show the length when collapsed | boolean | false |
114+
| showLine | Show the line | boolean | true |
115+
| showLineNumber | Show the line number | boolean | false |
116+
| showIcon | Show the icon | boolean | false |
117+
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118+
| virtual | Use virtual scroll | boolean | false |
119+
| height | The height of list when using virtual | number | 400 |
120+
| itemHeight | The height of node when using virtual | number | 20 |
121+
| selectedValue.sync | Selected data path | string, array | - |
122+
| path | Root data path | string | 'root' |
123+
| pathSelectable | Defines whether a data path supports selection | function(path, content) | - |
124+
| selectableType | Support path select, default none | `multiple`\|`single` | - |
125+
| showSelectController | Show the select controller | boolean | false |
126+
| selectOnClickNode | Trigger select when click node | boolean | true |
127+
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128+
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129+
| customValueFormatter | Custom value rendering function | function(data, key, path, defaultResult) | - |
130+
| editable | Support editable | boolean | false |
131+
| editableTrigger | Trigger | `click` \| `dblclick` | 'click' |
125132

126133
## Events
127134

128-
| Event Name | Description | Callback Parameters |
129-
| ---------- | ---------------------------------------------------------------------------- | ------------------- |
130-
| click | triggered when a data item is clicked | (path, data) |
131-
| change | triggered when the selected value changed (only the selectableType not null) | (newVal, oldVal) |
135+
| Event Name | Description | Parameters |
136+
| --------------- | ---------------------------------------- | -------------------- |
137+
| node-click | triggers when click node | (node: NodeData) |
138+
| brackets-click | triggers when click brackets | (collapsed: boolean) |
139+
| icon-click | triggers when click icon | (collapsed: boolean) |
140+
| selected-change | triggers when the selected value changed | (newVal, oldVal) |
132141

133142
## Major Contributors
134143

‎README.zh-CN.md‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,41 @@
33
## 特性
44

55
- 一个 JSON 美化工具
6-
- 提取字段层级数据
6+
- 支持字段层级数据提取
77
- 支持大数据虚拟滚动
8+
- 支持编辑
89

910
## Props
1011

11-
- 若仅使用基础功能(JSON 美化)，只需关注功能级别为 `基础` 的属性。
12-
- 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。
13-
14-
| 属性 | 级别 | 说明 | 类型 | 默认值 |
15-
| ------------------------ | ---- | ----------------------------------------- | ---------------------------------------------- | ------------- |
16-
| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - |
17-
| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity |
18-
| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false |
19-
| showLine | 基础 | 是否显示缩紧标识线 | boolean | true |
20-
| showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true |
21-
| virtual | 基础 | 是否使用虚拟滚动(大数据量时) | boolean | false |
22-
| itemHeight | 基础 | 使用虚拟滚动时，定义每一行高度 | number | auto |
23-
| v-model | 高级 | 双向绑定选中的数据层级 | string, array | string, array |
24-
| path | 高级 | 定义最顶层数据层级 | string | root |
25-
| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | function(path, content) | - |
26-
| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | multiple, single | - |
27-
| showSelectController | 高级 | 是否展示选择控制器 | boolean | false |
28-
| selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true |
29-
| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true |
30-
| collapsedOnClickBrackets | 高级 | 是否支持折叠 | boolean | true |
31-
| customValueFormatter | 高级 | 可以进行值的自定义渲染 | function(data, key, path, defaultFormatResult) | - |
12+
| 属性 | 说明 | 类型 | 默认值 |
13+
| ------------------------ | ------------------------------ | ---------------------------------------- | ------------- |
14+
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
15+
| deep | 深度，大于该深度的路径将被折叠 | number | Infinity |
16+
| showLength | 在数据折叠的时候展示长度 | boolean | false |
17+
| showLine | 展示标识线 | boolean | true |
18+
| showLineNumber | 展示行计数 | boolean | false |
19+
| showIcon | 展示图标 | boolean | false |
20+
| showDoubleQuotes | 展示 key 名的双引号 | boolean | true |
21+
| virtual | 使用虚拟滚动(大数据量) | boolean | false |
22+
| height | 使用虚拟滚动时，定义总高度 | number | 400 |
23+
| itemHeight | 使用虚拟滚动时，定义节点高度 | number | 20 |
24+
| selectedValue.sync | 双向绑定选中的数据路径 | string, array | string, array |
25+
| path | 定义最顶层数据路径 | string | root |
26+
| pathSelectable | 定义哪些数据路径可以被选择 | function(path, content) | - |
27+
| selectableType | 定义选择功能，默认无 | multiple, single | - |
28+
| showSelectController | 展示选择器 | boolean | false |
29+
| selectOnClickNode | 支持点击节点的时候触发选择 | boolean | true |
30+
| highlightSelectedNode | 支持高亮已选择节点 | boolean | true |
31+
| collapsedOnClickBrackets | 支持点击括号折叠 | boolean | true |
32+
| customValueFormatter | 自定义值渲染 | function(data, key, path, defaultResult) | - |
33+
| editable | 支持可编辑 | boolean | false |
34+
| editableTrigger | 触发编辑的时机 | `click` \| `dblclick` | 'click' |
3235

3336
## Events
3437

35-
| 事件名 | 说明 | 回调参数 |
36-
| ------ | -------------------------------------- | ---------------- |
37-
| click | 点击某一个数据层级时触发的事件 | (path, data) |
38-
| change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) |
38+
| 事件名称 | 说明 | 回调参数 |
39+
| --------------- | -------------------- | -------------------- |
40+
| node-click | 点击节点时触发 | (node: NodeData) |
41+
| brackets-click | 点击括号时触发 | (collapsed: boolean) |
42+
| icon-click | 点击图标时触发 | (collapsed: boolean) |
43+
| selected-change | 选中值发生变化时触发 | (newVal, oldVal) |

‎example/Editable.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66

77
<h3>Options:</h3>
88
<div class="options">
9-
<div>
10-
<label>showLength</label>
11-
<input v-model="showLength" type="checkbox" />
12-
</div>
139
<div>
1410
<label>showLine</label>
1511
<input v-model="showLine" type="checkbox" />
@@ -45,7 +41,6 @@
4541
v-model="data"
4642
:deep="deep"
4743
:show-double-quotes="true"
48-
:show-length="showLength"
4944
:show-line="showLine"
5045
:show-line-number="showLineNumber"
5146
:editable="editable"
@@ -93,7 +88,6 @@ export default {
9388
return {
9489
val: JSON.stringify(defaultData),
9590
data: defaultData,
96-
showLength: false,
9791
showLine: true,
9892
showLineNumber: false,
9993
editable: true,

‎example/SelectControl.vue‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,8 @@
6868
</div>
6969
<h3>selectedValue.sync:</h3>
7070
<div>{{ selectedValue }}</div>
71-
<h3>Current Click:</h3>
72-
<div>path: {{ itemPath }}</div>
73-
<div>
74-
data:
75-
<pre>{{ itemData }}</pre>
76-
</div>
71+
<h3>Current Node Click:</h3>
72+
<div>{{ node }}</div>
7773
</div>
7874
<div class="block">
7975
<h3>vue-json-pretty:</h3>
@@ -95,8 +91,10 @@
9591
:selectable-type="selectableType"
9692
:show-select-controller="showSelectController"
9793
:show-icon="showIcon"
98-
@node-click="handleClick(...arguments, 'complexTree')"
99-
@selected-change="handleChange"
94+
@node-click="handleNodeClick(...arguments, 'SelectControl')"
95+
@brackets-click="handleAll"
96+
@icon-click="handleAll"
97+
@selected-change="handleAll"
10098
/>
10199
</div>
102100
</div>
@@ -154,15 +152,14 @@ export default {
154152
collapsedOnClickBrackets: true,
155153
path: 'res',
156154
deep: 3,
157-
itemData: {},
158-
itemPath: '',
155+
node: null,
159156
showIcon: false,
160157
};
161158
},
162159
watch: {
163160
val(newVal) {
164161
try {
165-
this.data = JSON.parse(this.val);
162+
this.data = JSON.parse(newVal);
166163
} catch (err) {
167164
console.log('JSON ERROR');
168165
}
@@ -181,13 +178,12 @@ export default {
181178
},
182179
},
183180
methods: {
184-
handleClick(path, data, treeName = '') {
185-
// console.log('click: ', path, data, treeName);
186-
this.itemPath = path;
187-
this.itemData = !data ? data + '' : data; // 处理 data = null 的情况
181+
handleNodeClick(node, myParam) {
182+
// console.log('click: ', node, myParam);
183+
this.node = node;
188184
},
189-
handleChange(newVal, oldVal) {
190-
console.log('newVal: ', newVal, ' oldVal: ', oldVal);
185+
handleAll(...rest) {
186+
console.log('handleAll: ', rest);
191187
},
192188
},
193189
};

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-json-pretty",
3-
"version": "1.8.3",
3+
"version": "1.9.0",
44
"description": "A JSON tree view component that is easy to use and also supports data selection.",
55
"author": "leezng <[email protected]>",
66
"main": "lib/vue-json-pretty.js",

‎src/components/Brackets/index.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,10 @@ export default {
1111
required: true,
1212
type: String,
1313
},
14-
collapsedOnClickBrackets: Boolean,
1514
},
1615
methods: {
17-
// 切换括号展开|关闭
1816
toggleBrackets(e) {
19-
if (this.collapsedOnClickBrackets) {
20-
this.$emit('click', e);
21-
}
17+
this.$emit('click', e);
2218
},
2319
},
2420
};

‎src/components/Carets/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<span
33
v-if="isOpen || isClose"
44
:class="`vjs-carets vjs-carets__${isOpen ? 'open' : 'close'}`"
5-
@click="onClick"
5+
@click="handleClick"
66
>
77
<svg
88
viewBox="0 0 1024 1024"
@@ -39,8 +39,8 @@ export default {
3939
return this.nodeType === 'objectCollapsed' || this.nodeType === 'arrayCollapsed';
4040
},
4141
},
42-
method: {
43-
onClick() {
42+
methods: {
43+
handleClick() {
4444
this.$emit('click');
4545
},
4646
},

0 commit comments

Comments
 (0)