✨(component): 完善 select 组件的清空操作

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

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">

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 海量数据 
 :::