From 9ad7879323551cf1f779e18dafdcc51d42c39a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 27 Sep 2022 18:01:16 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(component):=20=E5=AE=8C=E5=96=84=20se?=
 =?UTF-8?q?lect=20=E7=BB=84=E4=BB=B6=E7=9A=84=E6=B8=85=E7=A9=BA=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/select/index.vue  | 18 +++++++--
 .../src/component/selectOption/index.vue      |  6 ++-
 .../src/document/zh-CN/components/select.md   | 39 +++++++++++++++++++
 3 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/package/component/src/component/select/index.vue b/package/component/src/component/select/index.vue
index d99ac0af..53ae953c 100644
--- a/package/component/src/component/select/index.vue
+++ b/package/component/src/component/select/index.vue
@@ -98,10 +98,6 @@ onMounted(() => {
   );
 });
 
-const handleSearch = (value: string) => {
-  searchValue.value = value;
-};
-
 const getOption = function (nodes: VNode[]) {
   nodes?.map((item: VNode) => {
     let component = item.type as Component;
@@ -127,6 +123,18 @@ const multiple = computed(() => {
   return props.multiple;
 });
 
+const handleSearch = (value: string) => {
+  searchValue.value = value;
+};
+
+const handleClear = () => {
+  if(multiple.value) {
+    selectedValue.value = [];
+  } else {
+    selectedValue.value = "";
+  }
+}
+
 provide("openState", openState);
 provide("selectedItem", selectedItem);
 provide("selectedValue", selectedValue);
@@ -150,6 +158,7 @@ provide("multiple", multiple);
         :collapseTagsTooltip="collapseTagsTooltip"
         :minCollapsedNum="minCollapsedNum"
         :disabledInput="true"
+        @clear="handleClear"
       >
         <template #suffix>
           <lay-icon
@@ -165,6 +174,7 @@ provide("multiple", multiple);
         :allow-clear="allowClear"
         :readonly="!showSearch"
         @Input="handleSearch"
+        @clear="handleClear"
       >
         <template #suffix>
           <lay-icon
diff --git a/package/component/src/component/selectOption/index.vue b/package/component/src/component/selectOption/index.vue
index acb506be..b1e5989d 100644
--- a/package/component/src/component/selectOption/index.vue
+++ b/package/component/src/component/selectOption/index.vue
@@ -53,7 +53,6 @@ const selected = computed(() => {
 });
 
 const select = () => {
-
   const info = {
     label: props.label,
     value: props.value,
@@ -95,7 +94,10 @@ onMounted(() => {
 <template>
   <dd
     v-show="display"
-    :class="['layui-select-option', { 'layui-this': selected && !multiple, 'layui-disabled': disabled}]"
+    :class="[
+      'layui-select-option',
+      { 'layui-this': selected, 'layui-disabled': disabled },
+    ]"
     @click="handleSelect"
   >
     <template v-if="multiple">
diff --git a/package/document-component/src/document/zh-CN/components/select.md b/package/document-component/src/document/zh-CN/components/select.md
index a6a5699b..8cd560df 100644
--- a/package/document-component/src/document/zh-CN/components/select.md
+++ b/package/document-component/src/document/zh-CN/components/select.md
@@ -138,6 +138,45 @@ export default {
 </script>
 :::
 
+
+::: title 允许清空
+:::
+
+::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
+
+<template>
+  <lay-space>
+    <lay-select v-model="value3" :allow-clear="true">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+    <lay-select v-model="value4" :allow-clear="true" :multiple="true">
+    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option value="2" label="编码"></lay-select-option>
+    <lay-select-option value="3" label="运动"></lay-select-option>
+  </lay-select>
+  </lay-space>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const value3 = ref('1')
+    const value4 = ref(['1'])
+    return {
+      value3,
+      value4
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 海量数据 
 :::