From 15d4b2eb2c1ee44a682210b3cbd4b5f14471e174 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 27 Oct 2021 16:30:30 +0800
Subject: [PATCH] doc: add tree-select highlight demo, close #4809

---
 components/tree-select/demo/highlight.vue | 94 +++++++++++++++++++++++
 components/tree-select/demo/index.vue     |  3 +
 components/tree-select/demo/suffix.vue    | 18 +++++
 3 files changed, 115 insertions(+)
 create mode 100644 components/tree-select/demo/highlight.vue

diff --git a/components/tree-select/demo/highlight.vue b/components/tree-select/demo/highlight.vue
new file mode 100644
index 000000000..4b2033ce4
--- /dev/null
+++ b/components/tree-select/demo/highlight.vue
@@ -0,0 +1,94 @@
+<docs>
+---
+order: 0
+title:
+  zh-CN: 高亮
+  en-US: Highlight
+---
+
+## zh-CN
+
+搜索值高亮
+
+## en-US
+
+Search Value Hightlight
+
+</docs>
+
+<template>
+  <a-tree-select
+    v-model:value="value"
+    v-model:searchValue="searchValue"
+    show-search
+    style="width: 100%"
+    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+    placeholder="Please select"
+    allow-clear
+    tree-default-expand-all
+    :tree-data="treeData"
+  >
+    <template #title="{ value: val, title }">
+      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
+      <template v-else>
+        <template
+          v-for="(fragment, i) in title
+            .toString()
+            .split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
+        >
+          <span
+            v-if="fragment.toLowerCase() === searchValue.toLowerCase()"
+            :key="i"
+            style="color: #08c"
+          >
+            {{ fragment }}
+          </span>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </template>
+    </template>
+  </a-tree-select>
+</template>
+<script lang="ts">
+import type { TreeSelectProps } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue';
+export default defineComponent({
+  setup() {
+    const value = ref<string>();
+    const treeData = ref<TreeSelectProps['treeData']>([
+      {
+        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',
+          },
+        ],
+      },
+    ]);
+    watch(value, () => {
+      console.log(value.value);
+    });
+    return {
+      searchValue: ref(''),
+      value,
+      treeData,
+    };
+  },
+});
+</script>
diff --git a/components/tree-select/demo/index.vue b/components/tree-select/demo/index.vue
index 451c97291..87fa10469 100644
--- a/components/tree-select/demo/index.vue
+++ b/components/tree-select/demo/index.vue
@@ -6,6 +6,7 @@
     <checkable />
     <suffix />
     <async />
+    <Highlight />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -15,6 +16,7 @@ import Multiple from './multiple.vue';
 import Checkable from './checkable.vue';
 import Suffix from './suffix.vue';
 import Async from './async.vue';
+import Highlight from './highlight.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -29,6 +31,7 @@ export default defineComponent({
     Checkable,
     Suffix,
     Async,
+    Highlight,
   },
   setup() {
     return {};
diff --git a/components/tree-select/demo/suffix.vue b/components/tree-select/demo/suffix.vue
index 58ea0d1e1..8ca90e074 100644
--- a/components/tree-select/demo/suffix.vue
+++ b/components/tree-select/demo/suffix.vue
@@ -1,3 +1,21 @@
+<docs>
+---
+order: 12
+debug: true
+title:
+  zh-CN: 后缀图标
+  en-US: Suffix
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The most basic usage.
+</docs>
+
 <template>
   <a-space direction="vertical" style="width: 100%">
     <a-tree-select