feat: add anchor、tabs、treeSelect Components

src/views/able/ant-treeSelect.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { TreeSelect } from "@pureadmin/components";
+
+const value1 = ref<string>("");
+const treeData1 = ref([
+  {
+    title: "parent 1",
+    value: "parent 1",
+    children: [
+      {
+        title: "parent 1-0",
+        value: "parent 1-0",
+        children: [
+          {
+            title: "my leaf",
+            value: "leaf1"
+          },
+          {
+            title: "your leaf",
+            value: "leaf2"
+          }
+        ]
+      },
+      {
+        title: "parent 1-1",
+        value: "parent 1-1"
+      }
+    ]
+  }
+]);
+
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
+
+function dig(path = "0", level = 3) {
+  const list = [];
+  for (let i = 0; i < 10; i += 1) {
+    const value = `${path}-${i}`;
+    const treeNode = {
+      title: value,
+      value
+    };
+
+    if (level > 0) {
+      // @ts-expect-error
+      treeNode.children = dig(value, level - 1);
+    }
+
+    list.push(treeNode);
+  }
+  return list;
+}
+
+const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
+
+const value2 = ref<string[]>(["0-0-0"]);
+const treeData2 = [
+  {
+    title: "Node1",
+    value: "0-0",
+    children: [
+      {
+        title: "Child Node1",
+        value: "0-0-0"
+      }
+    ]
+  },
+  {
+    title: "Node2",
+    value: "0-1",
+
+    children: [
+      {
+        title: "Child Node3",
+        value: "0-1-0",
+        disabled: true
+      },
+      {
+        title: "Child Node4",
+        value: "0-1-1"
+      },
+      {
+        title: "Child Node5",
+        value: "0-1-2"
+      }
+    ]
+  }
+];
+
+const value3 = ref<string>();
+const treeData3 = ref([
+  { id: 1, pId: 0, value: "1", title: "Expand to load" },
+  { id: 2, pId: 0, value: "2", title: "Expand to load" },
+  { id: 3, pId: 0, value: "3", title: "Tree Node", isLeaf: true }
+]);
+const genTreeNode = (parentId: number, isLeaf = false) => {
+  const random = Math.random().toString(36).substring(2, 6);
+  return {
+    id: random,
+    pId: parentId,
+    value: random,
+    title: isLeaf ? "Tree Node" : "Expand to load",
+    isLeaf
+  };
+};
+const onLoadData = treeNode => {
+  return new Promise(resolve => {
+    const { id } = treeNode.dataRef;
+    setTimeout(() => {
+      // @ts-expect-error
+      treeData3.value = treeData3.value.concat([
+        genTreeNode(id, false),
+        genTreeNode(id, true)
+      ]);
+      resolve(true);
+    }, 300);
+  });
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"
+          >仿antdv树选择，采用<el-link
+            href="https://www.npmjs.com/package/@pureadmin/components"
+            target="_blank"
+            style="font-size: 16px; margin: 0 4px 5px"
+            >@pureadmin/components</el-link
+          >，完全兼容antdv的<el-link
+            href="https://next.antdv.com/components/tree-select-cn"
+            target="_blank"
+            style="font-size: 16px; margin: 0 4px 5px"
+            >TreeSelect</el-link
+          >写法</span
+        >
+      </div>
+    </template>
+    <div class="flex justify-around flex-wrap">
+      <div>
+        <span>线性样式：</span>
+        <TreeSelect
+          class="w-200px"
+          v-model:value="value1"
+          show-search
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          placeholder="Please select"
+          allow-clear
+          :tree-line="true"
+          tree-default-expand-all
+          :tree-data="treeData1"
+        >
+          <template #title="{ value: val, title }">
+            <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
+            <template v-else>{{ title }}</template>
+          </template>
+        </TreeSelect>
+      </div>
+
+      <div>
+        <span>虚拟滚动：</span>
+        <TreeSelect
+          class="w-200px mt-6"
+          v-model:value="checkedKeys"
+          tree-checkable
+          tree-default-expand-all
+          :show-checked-strategy="SHOW_PARENT"
+          :height="233"
+          :tree-data="dig()"
+          :max-tag-count="10"
+        >
+          <template #title="{ title, value }">
+            <span v-if="value === '0-0-1-0'" style="color: #1890ff">{{
+              title
+            }}</span>
+            <template v-else>{{ title }}</template>
+          </template>
+        </TreeSelect>
+      </div>
+
+      <div>
+        <span>可勾选：</span>
+        <TreeSelect
+          class="w-200px"
+          v-model:value="value2"
+          :tree-data="treeData2"
+          tree-checkable
+          allow-clear
+          :show-checked-strategy="SHOW_PARENT"
+          placeholder="Please select"
+        />
+      </div>
+
+      <div>
+        <span>异步加载：</span>
+        <TreeSelect
+          class="w-200px"
+          v-model:value="value3"
+          tree-data-simple-mode
+          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+          :tree-data="treeData3"
+          placeholder="Please select"
+          :load-data="onLoadData"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>