Skip to content

Commit 684304e

Browse files
mathink12mathink12
committed
docs: 新增 docs
1 parent cc96de7 commit 684304e

File tree

10 files changed

+270
-60
lines changed

10 files changed

+270
-60
lines changed

‎docs-src/.vuepress/components/JsonTreeDemo.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
22
<div class="json-tree-demo">
33
<el-card>
4-
<el-form label-width="70px" label-position="left">
5-
<el-form-item label="连接线">
4+
<el-form label-width="180px" label-position="left">
5+
<el-form-item label="连接线（Connector Line）">
66
<el-switch v-model="showLine" />
77
</el-form-item>
8-
<el-form-item label="图标风格">
8+
<el-form-item label="图标风格（Toggle Icon）">
99
<el-radio-group v-model="toggle" size="small">
1010
<el-radio-button label="default">默认风格</el-radio-button>
1111
<el-radio-button label="caret">自定义风格 1</el-radio-button>
1212
<el-radio-button label="arrow">自定义风格 2</el-radio-button>
1313
</el-radio-group>
1414
</el-form-item>
15-
<el-form-item label="层级缩进">
15+
<el-form-item label="层级缩进（Deep Indent）">
1616
<el-radio-group v-model="indent" size="small">
1717
<el-radio-button
1818
v-for="(item, i) in indents"
@@ -22,52 +22,54 @@
2222
</el-radio-button>
2323
</el-radio-group>
2424
</el-form-item>
25-
<el-form-item label="展开层级">
26-
<el-input-number v-model="deep" size="small" />
25+
<el-form-item label="展开层级（Expand Deep）">
26+
<el-input-number v-model="deep" :min="0" size="small" />
2727
</el-form-item>
2828
</el-form>
2929

3030
</el-card>
3131

3232
<div style="margin: 20px 0;">
33-
<el-button size="small" @click="onExpandAll">全部展开</el-button>
34-
<el-button size="small" @click="onCollapseAll">全部收起</el-button>
33+
<el-button size="small" @click="onExpandAll">
34+
全部展开（Expand All）
35+
</el-button>
36+
<el-button size="small" @click="onCollapseAll">
37+
全部收起（Collapse All）
38+
</el-button>
3539
</div>
3640

37-
<JsonTree ref="jsonTree"
41+
<JsonTree v-if="showJsonTree"
42+
ref="jsonTree"
3843
:json-data="jsonData"
3944
:show-line="showLine"
40-
:indent="indent">
41-
<template v-if="toggle !== 'default'" #toggle="{ collapse }">
42-
<i :class="calcToggleClass(collapse)"></i>
43-
</template>
44-
<template #count="{ count, type }">
45-
（值类型：{{ type }}，共：{{ count }} 项）
46-
</template>
47-
</JsonTree>
45+
:indent="indent"
46+
:expand-deep="deep"
47+
/>
4848
</div>
4949
</template>
5050

5151
<script>
52+
import { jsonData } from '../mock/data'
53+
5254
export default {
5355
name: 'JsonTreeDemo',
5456
data () {
5557
return {
58+
showJsonTree: true,
5659
showLine: true,
5760
indent: '20px',
5861
deep: 2,
5962
indents: ['5px', '10px', '20px', '30px', '40px', '50px'],
6063
toggle: 'default',
61-
jsonData: {
62-
name: 'Tom',
63-
age: 7,
64-
nums: [1, 1, 2, 3, 5, 8, 13, 21, 34],
65-
techs: [
66-
{ text: 'coding', label: 1 },
67-
{ text: 'fishing', label: 2 },
68-
{ text: 'gaming', label: 3 }
69-
]
70-
}
64+
jsonData
65+
}
66+
},
67+
watch: {
68+
deep () {
69+
this.showJsonTree = false
70+
this.$nextTick(() => {
71+
this.showJsonTree = true
72+
})
7173
}
7274
},
7375
methods: {

‎docs-src/.vuepress/components/JsonTreeDemoCountSlot.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<el-card style="margin-top: 20px;">
3+
<JsonTree :json-data="jsonData" :expand-deep="1">
4+
<template #count="{ count, type }">
5+
//（值类型：{{ type }}，共 {{ count }} 项）
6+
</template>
7+
</JsonTree>
8+
</el-card>
9+
</template>
10+
11+
<script>
12+
import { jsonData } from '../mock/data'
13+
14+
export default {
15+
name: 'JsonTreeDemoCountSlot',
16+
data () {
17+
return {
18+
jsonData
19+
}
20+
}
21+
}
22+
</script>

‎docs-src/.vuepress/components/JsonTreeDemoKeySlot.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<el-card style="margin-top: 20px;">
3+
<JsonTree :json-data="jsonData" :expand-deep="1">
4+
<template #key="{ itemKey }">
5+
<span style="color: #f00;">{{ itemKey }}</span>
6+
</template>
7+
</JsonTree>
8+
</el-card>
9+
</template>
10+
11+
<script>
12+
import { jsonData } from '../mock/data'
13+
14+
export default {
15+
name: 'JsonTreeDemoKeySlot',
16+
data () {
17+
return {
18+
jsonData
19+
}
20+
}
21+
}
22+
</script>

‎docs-src/.vuepress/components/JsonTreeDemoToggleSlot.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<el-card style="margin-top: 20px;">
3+
<JsonTree :json-data="jsonData" :expand-deep="1">
4+
<template #toggle="{ collapse }">
5+
<i :class="collapse ? 'el-icon-caret-right' : 'el-icon-caret-bottom'"></i>
6+
</template>
7+
</JsonTree>
8+
</el-card>
9+
</template>
10+
11+
<script>
12+
import { jsonData } from '../mock/data'
13+
14+
export default {
15+
name: 'JsonTreeDemoToggleSlot',
16+
data () {
17+
return {
18+
jsonData
19+
}
20+
}
21+
}
22+
</script>

‎docs-src/.vuepress/components/JsonTreeDemoValSlot.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<el-card style="margin-top: 20px;">
3+
<JsonTree :json-data="jsonData" :expand-deep="1">
4+
<template #val="{ itemVal, type }">
5+
<span style="color: #f00;">{{ itemVal }}（{{ type }}）</span>
6+
</template>
7+
</JsonTree>
8+
</el-card>
9+
</template>
10+
11+
<script>
12+
import { jsonData } from '../mock/data'
13+
14+
export default {
15+
name: 'JsonTreeDemoValSlot',
16+
data () {
17+
return {
18+
jsonData
19+
}
20+
}
21+
}
22+
</script>

‎docs-src/.vuepress/config.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@ module.exports = {
99
lineNumbers: true
1010
},
1111
themeConfig: {
12-
sidebar: true
12+
nav: [
13+
{ text: 'GitHub', link: 'https://github.com/mathink12/json-tree' }
14+
],
15+
sidebar: [
16+
'/',
17+
'/getting-started/',
18+
'/api/'
19+
]
1320
},
1421
chainWebpack: config => {
1522
config.resolve.alias
@@ -24,5 +31,15 @@ module.exports = {
2431
options.compilerOptions.preserveWhitespace = false
2532
return options
2633
})
27-
}
34+
},
35+
plugins: [
36+
// [
37+
// '@vuepress/last-updated',
38+
// {
39+
// transformer: (timestamp, lang) =>
40+
// format(timestamp, 'yyyy-MM-dd HH:mm:ss')
41+
// }
42+
// ],
43+
['@vuepress/back-to-top']
44+
]
2845
}

‎docs-src/.vuepress/mock/data.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const jsonData = {
2+
name: 'Tom',
3+
age: 2,
4+
nums: [1, 1, 2, 3, 5, 8],
5+
friends: [
6+
{
7+
name: 'Jerry',
8+
age: 1,
9+
nums: [7]
10+
},
11+
{
12+
name: 'Tuffy',
13+
age: 1
14+
},
15+
{
16+
name: 'Spike'
17+
},
18+
{
19+
name: 'Tyke'
20+
}
21+
]
22+
}
23+
24+
export {
25+
jsonData
26+
}

‎docs-src/README.md‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,3 @@
1-
# JsonTree
1+
# Playground
22

3-
## Playground
43
<JsonTreeDemo />
5-
6-
7-
## Getting started
8-
```bash
9-
npm i json-tree
10-
```
11-
12-
```js
13-
// main.js
14-
import Vue from 'vue'
15-
import JsonTree from 'json-tree'
16-
17-
Vue.component('JsonTree', JsonTree)
18-
```
19-
20-
```vue
21-
<JsonTree :json-data="{ name: 'Tom', age: 7 }" />
22-
```
23-
24-
## Props
25-
26-
27-
## Slots
28-
29-
30-
## Events
31-
32-
33-
## Methods

‎docs-src/api/README.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# API
2+
3+
## Props
4+
| Name | Type | Description |
5+
|------------|--------------------|-------------------------------------------|
6+
| jsonData | `Array` / `Object` | 要显示的 json 数据 |
7+
| showLine | `Boolean` | 是否显示辅助连接线，默认为 `true`（显示） |
8+
| indent | `String` | 层级缩进值，默认为 `'20px'` |
9+
| expandDeep | `Number` | 自动展开的层级，默认为 `2` |
10+
11+
可前往 [Playground](/) 查看效果
12+
13+
14+
## Slots
15+
| Name | Slot props | Description |
16+
|--------|-------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|
17+
| toggle | <code style="white-space: nowrap;">{ collapse }</code> | 展开、收起的图标，展开时，`collapse` 为 `false`，收起时为 `true` |
18+
| count | <code style="white-space: nowrap;">{ count, type }</code> | 显示在数组或对象类型的值后面表示其有多少项的说明，`count` 表示数组长度或对象的键值对个数，`type` 表示值类型（'array' 或 'object'） |
19+
| key | <code style="white-space: nowrap;">{ itemKey }</code> | 显示的 key。如果是对象，则是对象的 `key`；如果是数组，则是数组项的索引。 |
20+
| val | <code style="white-space: nowrap;">{ itemVal, type }</code> | 显示的 value。对象的 value 或者数组的项。 |
21+
22+
23+
#### 自定义 `toggle`（使用 Element UI 的图标）
24+
25+
<JsonTreeDemoToggleSlot />
26+
27+
::: details 自定义 `toggle`（使用 Element UI 的图标）
28+
```vue
29+
<JsonTree :json-data="jsonData" :expand-deep="1">
30+
<template #toggle="{ collapse }">
31+
<i :class="collapse ? 'el-icon-caret-right' : 'el-icon-caret-bottom'"></i>
32+
</template>
33+
</JsonTree>
34+
```
35+
:::
36+
37+
#### 自定义 `count`
38+
39+
<JsonTreeDemoCountSlot />
40+
41+
::: details 自定义 `count`
42+
```vue
43+
<JsonTree :json-data="jsonData" :expand-deep="1">
44+
<template #count="{ count, type }">
45+
//（值类型：{{ type }}，共 {{ count }} 项）
46+
</template>
47+
</JsonTree>
48+
```
49+
:::
50+
51+
#### 自定义 `key`
52+
53+
<JsonTreeDemoKeySlot />
54+
55+
::: details 自定义 `key`
56+
```vue
57+
<JsonTree :json-data="jsonData" :expand-deep="1">
58+
<template #key="{ itemKey }">
59+
<span style="color: #f00;">{{ itemKey }}</span>
60+
</template>
61+
</JsonTree>
62+
```
63+
:::
64+
65+
#### 自定义 `val`
66+
67+
<JsonTreeDemoValSlot />
68+
69+
::: details 自定义 `val`
70+
```vue
71+
<JsonTree :json-data="jsonData" :expand-deep="1">
72+
<template #val="{ itemVal, type }">
73+
<span style="color: #f00;">{{ itemVal }}（{{ type }}）</span>
74+
</template>
75+
</JsonTree>
76+
```
77+
:::
78+
79+
## Events
80+
暂无
81+
82+
83+
## Methods
84+
85+
| Name | Params | Description |
86+
|-------------|--------|-------------|
87+
| expandAll | -- | 全部展开 |
88+
| collapseAll | -- | 全部收起 |

‎docs-src/getting-started/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Getting started
2+
3+
1. 安装 Install
4+
```bash
5+
npm i json-tree # yarn add json-tree
6+
```
7+
8+
2. 使用 Usage
9+
```js
10+
// main.js
11+
import Vue from 'vue'
12+
import JsonTree from 'json-tree'
13+
14+
Vue.component('JsonTree', JsonTree)
15+
```
16+
17+
```vue
18+
<JsonTree :json-data="{ name: 'Tom', age: 7 }" />
19+
```

0 commit comments

Comments
 (0)