|
1 | | -# vue-json-pretty |
| 1 | +简体中文 | [English](./README.md) |
2 | 2 |
|
3 | | -[](https://travis-ci.org/leezng/vue-json-pretty) |
4 | | -[](https://www.npmjs.org/package/vue-json-pretty) |
5 | | -[](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE) |
| 3 | +## 特性 |
6 | 4 |
|
7 | | -一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件 |
8 | | - |
9 | | -- 基础功能: JSON 的美化 |
10 | | -- 高级功能: JSON 数据对应层级数据的获取 |
11 | | - |
12 | | -## 链接 |
13 | | - |
14 | | -- [Demo](https://leezng.github.io/vue-json-pretty) |
15 | | -- [Github](https://github.com/leezng/vue-json-pretty) |
16 | | -- [NPM](https://www.npmjs.com/package/vue-json-pretty) |
17 | | -- [English Document](./README.md) |
18 | | - |
19 | | -## 安装 |
20 | | - |
21 | | -```js |
22 | | -npm install vue-json-pretty -save |
23 | | -``` |
24 | | - |
25 | | -## 快速开始 |
26 | | - |
27 | | -```html |
28 | | -<template> |
29 | | - <div> |
30 | | - ... |
31 | | - <vue-json-pretty |
32 | | - :path="'res'" |
33 | | - :data="{ key: 'value' }" |
34 | | - @click="handleClick"> |
35 | | - </vue-json-pretty> |
36 | | - </div> |
37 | | -</template> |
38 | | -``` |
39 | | - |
40 | | -```js |
41 | | -// 更多用法请见demo页面 |
42 | | -import VueJsonPretty from 'vue-json-pretty' |
43 | | - |
44 | | -export default { |
45 | | - components: { |
46 | | - VueJsonPretty |
47 | | - } |
48 | | -} |
49 | | -``` |
| 5 | +- 一个 JSON 美化工具 |
| 6 | +- 提取字段层级数据 |
| 7 | +- 使用 Typescript，提供类型描述 |
| 8 | +- 支持大数据虚拟滚动 |
50 | 9 |
|
51 | 10 | ## Props |
52 | 11 |
|
53 | | -- 若仅使用基础功能(JSON美化)，只需关注功能级别为 `基础` 的属性。 |
| 12 | +- 若仅使用基础功能(JSON 美化)，只需关注功能级别为 `基础` 的属性。 |
54 | 13 | - 若使用高级功能(选择数据)，你可以同时使用 `基础` 与 `高级` 的属性。 |
55 | 14 |
|
56 | | -| 属性 | 级别 | 说明 | 类型 | 默认值 | |
57 | | -|-------- |-------- |-------- |-------- | -------- | |
58 | | -| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - | |
59 | | -| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity | |
60 | | -| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false | |
61 | | -| showLine | 基础 | 是否显示缩紧标识线 | boolean | true | |
62 | | -| showDoubleQuotes | 基础 | 是否展示key名的双引号 | boolean | true | |
63 | | -| highlightMouseoverNode | 基础 | 是否在mouseover的时候高亮 | boolean | false | |
64 | | -| v-model | 高级 | 双向绑定选中的数据层级 | string, array | -, [] | |
65 | | -| path | 高级 | 定义最顶层数据层级 | string | root | |
66 | | -| pathChecked | 高级 | 定义哪些数据层级是已被选中的 | array | [] | |
67 | | -| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | Function(itemPath, itemData) | - | |
68 | | -| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | enum: -, multiple, single | - | |
69 | | -| showSelectController | 高级 | 是否展示选择控制器 | boolean | false | |
70 | | -| selectOnClickNode | 高级 | 是否在点击节点的时候触发v-model双向绑定 | boolean | true | |
71 | | -| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true | |
72 | | -| customValueFormatter | 高级 | 可以进行值的自定义渲染 | Function(data, key, parent, defaultFormatted) | - | |
| 15 | +| 属性 | 级别 | 说明 | 类型 | 默认值 | |
| 16 | +| ------------------------ | ---- | ----------------------------------------- | ----------------------- | ------------- | |
| 17 | +| data | 基础 | 待美化的源数据，注意不是 `JSON` 字符串 | `JSON` 对象 | - | |
| 18 | +| deep | 基础 | 数据深度, 大于该深度的数据将不被展开 | number | Infinity | |
| 19 | +| showLength | 基础 | 是否在数据线闭合的时候展示长度 | boolean | false | |
| 20 | +| showLine | 基础 | 是否显示缩紧标识线 | boolean | true | |
| 21 | +| showDoubleQuotes | 基础 | 是否展示 key 名的双引号 | boolean | true | |
| 22 | +| virtual | 基础 | 是否使用虚拟滚动(大数据量时) | boolean | false | |
| 23 | +| itemHeight | 基础 | 使用虚拟滚动时，定义每一行高度 | number | auto | |
| 24 | +| v-model | 高级 | 双向绑定选中的数据层级 | string, array | string, array | |
| 25 | +| path | 高级 | 定义最顶层数据层级 | string | root | |
| 26 | +| pathSelectable | 高级 | 定义哪些数据层级是可以被选中的 | function(path, content) | - | |
| 27 | +| selectableType | 高级 | 定义组件支持的选中方式，默认无选中功能 | multiple, single | - | |
| 28 | +| showSelectController | 高级 | 是否展示选择控制器 | boolean | false | |
| 29 | +| selectOnClickNode | 高级 | 是否在点击节点的时候触发 v-model 双向绑定 | boolean | true | |
| 30 | +| highlightSelectedNode | 高级 | 是否高亮已选项 | boolean | true | |
| 31 | +| collapsedOnClickBrackets | 高级 | 是否支持折叠 | boolean | true | |
| 32 | + |
| 33 | +| customValueFormatter | 高级 | 可以进行值的自定义渲染 | function(data, key, path, defaultFormatResult) | - | |
73 | 34 |
|
74 | 35 | ## Events |
75 | 36 |
|
76 | | -| 事件名 | 说明 | 回调参数 | |
77 | | -|---------- |-------- |---------- | |
78 | | -| click | 点击某一个数据层级时触发的事件 | (path, data) | |
79 | | -| change | v-model改变的事件(仅在选择模式下可用) | (newVal, oldVal) | |
| 37 | +| 事件名 | 说明 | 回调参数 | |
| 38 | +| ------ | -------------------------------------- | ---------------- | |
| 39 | +| click | 点击某一个数据层级时触发的事件 | (path, data) | |
| 40 | +| change | v-model 改变的事件(仅在选择模式下可用) | (newVal, oldVal) | |
0 commit comments