docs: 新增示例文档

Author: mathink12

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="json-tree-demo">
+    <el-card>
+      <el-form label-width="70px" label-position="left">
+        <el-form-item label="连接线">
+          <el-switch v-model="showLine" />
+        </el-form-item>
+        <el-form-item label="图标风格">
+          <el-radio-group v-model="toggle" size="small">
+            <el-radio-button label="default">默认风格</el-radio-button>
+            <el-radio-button label="caret">自定义风格 1</el-radio-button>
+            <el-radio-button label="arrow">自定义风格 2</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="层级缩进">
+          <el-radio-group v-model="indent" size="small">
+            <el-radio-button
+              v-for="(item, i) in indents"
+              :key="i"
+              :label="item">
+              {{ item }}
+            </el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="展开层级">
+          <el-input-number v-model="deep" size="small" />
+        </el-form-item>
+      </el-form>
+
+    </el-card>
+
+    <div style="margin: 20px 0;">
+      <el-button size="small" @click="onExpandAll">全部展开</el-button>
+      <el-button size="small" @click="onCollapseAll">全部收起</el-button>
+    </div>
+
+    <JsonTree ref="jsonTree"
+      :json-data="jsonData"
+      :show-line="showLine"
+      :indent="indent">
+      <template v-if="toggle !== 'default'" #toggle="{ collapse }">
+        <i :class="calcToggleClass(collapse)"></i>
+      </template>
+      <template #count="{ count, type }">
+        （值类型：{{ type }}，共：{{ count }} 项）
+      </template>
+    </JsonTree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'JsonTreeDemo',
+  data () {
+    return {
+      showLine: true,
+      indent: '20px',
+      deep: 2,
+      indents: ['5px', '10px', '20px', '30px', '40px', '50px'],
+      toggle: 'default',
+      jsonData: {
+        name: 'Tom',
+        age: 7,
+        nums: [1, 1, 2, 3, 5, 8, 13, 21, 34],
+        techs: [
+          { text: 'coding', label: 1 },
+          { text: 'fishing', label: 2 },
+          { text: 'gaming', label: 3 }
+        ]
+      }
+    }
+  },
+  methods: {
+    onExpandAll () {
+      this.$refs.jsonTree.expandAll()
+    },
+    onCollapseAll () {
+      this.$refs.jsonTree.collapseAll()
+    },
+    calcToggleClass (collapse) {
+      let className = ''
+      const { toggle } = this
+      if (toggle === 'caret') {
+        if (collapse) {
+          className = 'el-icon-caret-right'
+        } else {
+          className = 'el-icon-caret-bottom'
+        }
+      } else if (toggle === 'arrow') {
+        if (collapse) {
+          className = 'el-icon-arrow-right'
+        } else {
+          className = 'el-icon-arrow-down'
+        }
+      }
+      return className
+    }
+  }
+}
+</script>

docs-src/.vuepress/config.js

@@ -8,9 +8,12 @@ module.exports = {
   markdown: {
     lineNumbers: true
   },
-  // themeConfig: {},
+  themeConfig: {
+    sidebar: true
+  },
   chainWebpack: config => {
     config.resolve.alias
+      .set('@', resolve('src'))
       .set('@lib', resolve('dist'))
   }
 }

docs-src/.vuepress/enhanceApp.js

@@ -1,5 +1,9 @@
-import JsonView from '@lib/JsonTree.common.js'
-import "@lib/JsonTree.css"
+import ElementUI from 'element-ui'
+// import JsonTree from '@lib/JsonTree.common.js'
+import JsonTree from '@/json-tree/JsonTree.vue'
+
+import 'element-ui/lib/theme-chalk/index.css'
+// import "@lib/JsonTree.css"
 
 // 使用异步函数也是可以的
 export default ({
@@ -9,5 +13,6 @@ export default ({
   siteData, // 站点元数据
   isServer // 当前应用配置是处于 服务端渲染 或 客户端
 }) => {
-  Vue.component('JsonView', JsonView)
+  Vue.use(ElementUI)
+  Vue.component('JsonTree', JsonTree)
 }

docs-src/README.md

@@ -1,14 +1,33 @@
 # JsonTree
 
-<JsonView
-  :json-data="{
-    name: 'Tom',
-    age: 7,
-    nums: [1, 1, 2, 3, 5, 8, 13, 21, 34],
-    techs: [
-      { text: 'coding', label: 1 },
-      { text: 'fishing', label: 2 },
-      { text: 'gaming', label: 3 }
-    ]
-  }"
-/>
+## Playground
+<JsonTreeDemo />
+
+
+## Getting started
+```bash
+npm i json-tree
+```
+
+```js
+// main.js
+import Vue from 'vue'
+import JsonTree from 'json-tree'
+
+Vue.component('JsonTree', JsonTree)
+```
+
+```vue
+<JsonTree :json-data="{ name: 'Tom', age: 7 }" />
+```
+
+## Props
+
+
+## Slots
+
+
+## Events
+
+
+## Methods

package-lock.json

@@ -31,7 +31,9 @@
     "@vue/cli-service": "^4.5.9",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vuepress/plugin-back-to-top": "^1.7.1",
+    "async-validator": "^1.11.5",
     "babel-eslint": "^10.1.0",
+    "element-ui": "^2.14.1",
     "eslint": "^7.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",