feat: update example

Author: ChuChencheng

examples/Feature.vue

@@ -7,17 +7,24 @@
         <div class="interface">
           <div style="height: 300px">
             <VTree
+              ref="basicTreeRef"
               :data="basicUsage"
               :nodeClassName="node => `generated-class-${node.id}`"
             />
           </div>
         </div>
-        <div class="desc">纯展示</div>
+        <div class="desc">
+          <div>纯展示</div>
+          <div class="desc-block">
+            <button @click="handleExpandAll">展开全部节点</button>
+            <button @click="handleCollapseAll">折叠全部节点</button>
+          </div>
+        </div>
       </div>
     </div>
 
     <!-- 数据正确性验证 -->
-    <div class="panel">
+    <!-- <div class="panel">
       <div class="header">数据正确性验证</div>
       <div class="body">
         <div class="interface">
@@ -27,7 +34,7 @@
         </div>
         <div class="desc">数据正确性</div>
       </div>
-    </div>
+    </div> -->
 
     <!-- 单选 -->
     <div class="panel">
@@ -176,7 +183,8 @@ const genChildrenData = (nodeCount = 2) => {
   return treeDataGenerator({
     treeDepth: 1,
     nodesPerLevel: nodeCount,
-    inOrder: true
+    inOrder: true,
+    useNanoID: true,
   })
 }
 
@@ -249,9 +257,23 @@ export default defineComponent({
       })
     }
 
+    const basicTreeRef = ref()
+
+    const handleExpandAll = () => {
+      basicTreeRef.value.setExpandAll(true)
+    }
+
+    const handleCollapseAll = () => {
+      basicTreeRef.value.setExpandAll(false)
+      basicTreeRef.value.scrollTo(basicUsage.value[0].id, 0)
+    }
+
     return {
       // 基本用法
       basicUsage,
+      basicTreeRef,
+      handleExpandAll,
+      handleCollapseAll,
 
       // 数据正确性
       orderData,

examples/Performance.vue

@@ -6,25 +6,28 @@
     <div class="control">
       <div class="desc-block">
         <p>说明：在 Chrome 下表现良好</p>
-        <p>
-          在火狐浏览器下，因为其异步滚动策略 (scroll-linked)
-          ，在快速滚动时会导致内容空白。
-        </p>
-        <p>
-          另：浏览器元素/文档是有最大高度限制的，过多数据会导致显示不正常(Chrome
-          下 100 万条可以正常显示，但是在火狐或 Edge 则不行)
-        </p>
+        <p>浏览器元素/文档是有最大高度限制的，过多数据会导致显示不正常</p>
+        <p>生成节点比较耗时，请注意节点深度</p>
       </div>
+      <hr>
       <div class="controls">
         <label>节点深度：</label>
         <input v-model="params.treeDepth" type="number" />
+        (请输入 1-10 的整数)
       </div>
       <div class="controls">
         <label>每层节点个数：</label>
         <input v-model="params.nodesPerLevel" type="number" />
       </div>
       <div class="controls">
-        <label>总节点个数：</label>
+        <label>预计生成节点个数：</label>
+        <span>
+          {{ totalNodesToGenerate }}
+          <span v-if="tooManyNodes" style="color: red">节点过多或无效节点数，请调整节点深度或个数</span>
+        </span>
+      </div>
+      <div class="controls">
+        <label>已生成节点个数：</label>
         {{ nodeTotal }}
       </div>
       <div class="controls">
@@ -43,6 +46,13 @@
           <span v-else style="color: green">树数据已设置</span>
         </div>
       </div>
+      <hr>
+      <div class="controls">
+        <div class="actions">
+          <button @click="handleExpandAll">展开全部节点</button>
+          <button @click="handleCollapseAll">折叠全部节点</button>
+        </div>
+      </div>
       <div class="controls">
         <label>滚动节点id：</label>
         <input v-model="scrollKey" type="text" />
@@ -63,6 +73,9 @@
         <div class="actions">
           <button @click="handleScrollToNode">滚动到此节点</button>
         </div>
+        <div class="actions">
+          <p>(滚动只对没被折叠的节点有效)</p>
+        </div>
       </div>
     </div>
   </div>
@@ -71,7 +84,7 @@
 <script lang="ts">
 import VTree from '../src'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref } from 'vue-demi'
+import { computed, defineComponent, ref } from 'vue-demi'
 
 interface TreeMockMeta {
   treeDepth: number
@@ -80,20 +93,20 @@ interface TreeMockMeta {
 
 const dataAmountMap: Record<string, TreeMockMeta> = {
   '1w': {
-    treeDepth: 2,
-    nodesPerLevel: 100
+    treeDepth: 3,
+    nodesPerLevel: 22
   },
   '10w': {
-    treeDepth: 2,
-    nodesPerLevel: 320
+    treeDepth: 3,
+    nodesPerLevel: 47
   },
   '20w': {
-    treeDepth: 2,
-    nodesPerLevel: 450
+    treeDepth: 3,
+    nodesPerLevel: 59
   },
   '30w': {
-    treeDepth: 2,
-    nodesPerLevel: 550
+    treeDepth: 3,
+    nodesPerLevel: 67
   }
 }
 
@@ -117,7 +130,29 @@ export default defineComponent({
     const scrollVerticalOption = ref('top')
     const scrollValue = ref(0)
     const tree = ref()
+
+    const totalNodesToGenerate = computed(() => {
+      const d = ~~Number(params.value.treeDepth)
+      const n = ~~Number(params.value.nodesPerLevel)
+
+      if (d < 1 || d > 10) return 0
+      if (n < 1) return 0
+
+      let total = 0
+      let times = d
+      while (times) {
+        total += Math.pow(n, times--)
+      }
+
+      return total
+    })
+
+    const tooManyNodes = computed(() => {
+      return totalNodesToGenerate.value < 1 || totalNodesToGenerate.value > 1000000
+    })
+
     const handleGenerate = () => {
+      if (tooManyNodes.value) return
       const mock = treeDataGenerator(
         Object.assign({}, params.value, {
           inOrder: true,
@@ -146,6 +181,15 @@ export default defineComponent({
       )
     }
 
+    const handleExpandAll = () => {
+      tree.value.setExpandAll(true)
+    }
+
+    const handleCollapseAll = () => {
+      tree.value.setExpandAll(false)
+      tree.value.scrollTo('0', 0)
+    }
+
     return {
       tree,
       cache,
@@ -159,7 +203,11 @@ export default defineComponent({
       handleGenerate,
       handleGenerateTotal,
       handleSetData,
-      handleScrollToNode
+      handleScrollToNode,
+      totalNodesToGenerate,
+      tooManyNodes,
+      handleExpandAll,
+      handleCollapseAll,
     }
   },
   created() {
@@ -181,16 +229,15 @@ export default defineComponent({
 
   .control {
     flex: 1;
-    padding: 30px 0;
+    padding: 10px 0;
     border-left: 1px solid gray;
 
     .desc-block {
-      padding: 10px 30px;
-      margin-bottom: 20px;
+      padding: 0 30px;
     }
 
     .controls {
-      @left-len: 120px;
+      @left-len: 150px;
 
       padding: 10px;
 

tests/tree-data-generator.ts

@@ -1,3 +1,5 @@
+import { faker } from '@faker-js/faker'
+
 export interface ITreeNodeData {
   title?: string | number
   id?: string | number
@@ -15,18 +17,24 @@ interface IGeneratorOptions {
   sameIdTitle?: boolean
   inOrder?: boolean
   forceString?: boolean
+  useNanoID?: boolean
 }
 
-const genRandomStr = (): string => {
-  return Math.random().toString(36).substring(2)
+const genRandomStr = ({ index, useNanoID }: { index?: number; useNanoID?: boolean }): string => {
+  if (useNanoID) {
+    return faker.string.nanoid()
+  }
+  const randomStr = faker.person.lastName()
+  return index == null ? randomStr : `${randomStr} - (${index})`
 }
 
 export default ({
   treeDepth = 5,
   nodesPerLevel,
   sameIdTitle = false,
   inOrder = false,
-  forceString = false
+  forceString = false,
+  useNanoID = false,
 }: IGeneratorOptions = {}): { data: ITreeNodeData[]; total: number } => {
   let data: ITreeNodeData[] = []
   let total = 0
@@ -37,16 +45,17 @@ export default ({
       ? nodesPerLevel
       : Math.floor(Math.random() * 100)
     for (let i: number = 0; i < len; i++) {
-      let title = inOrder ? orderCount++ : genRandomStr()
+      let title = inOrder ? orderCount : genRandomStr({ index: orderCount })
       if (forceString) title = title.toString()
-      const id = sameIdTitle ? title : genRandomStr()
+      const id = sameIdTitle ? title : genRandomStr({ index: orderCount, useNanoID })
       const node = {
         title,
         id,
         children: []
       }
       root.push(node)
       total++
+      orderCount++
       genNodeData(node.children, level + 1)
     }
   }