merge

src/component/select/index.vue

@@ -18,6 +18,7 @@ import {
   watch,
   onUnmounted,
   StyleValue,
+  Fragment,
 } from "vue";
 import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
@@ -25,12 +26,14 @@ import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import LaySelectOption, { SelectOptionProps } from "../selectOption/index.vue";
 import { SelectSize } from "./interface";
+import { isArrayChildren } from "../../utils";
 
 export interface SelectProps {
   name?: string;
   disabled?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
+  searchMethod?: Function;
   modelValue?: any;
   multiple?: boolean;
   items?: SelectOptionProps[];
@@ -73,15 +76,13 @@ var timer: any;
 
 const getOption = (nodes: VNode[], newOptions: any[]) => {
   nodes?.map((item) => {
-    let component = item.type as Component;
-    if (item.type.toString() == "Symbol(Fragment)") {
+    if (isArrayChildren(item, item.children)) {
       getOption(item.children as VNode[], newOptions);
     } else {
-      if (component.name == LaySelectOption.name) {
+      if ((item.type as Component).name == LaySelectOption.name) {
         if (item.children) {
           // @ts-ignore
           const label = item.children.default()[0].children;
-
           if (typeof label == "string") {
             // @ts-ignore
             item.props.label = label;
@@ -122,7 +123,6 @@ const onCompositionend = (event: Event) => {
 onMounted(() => {
   intOption();
   timer = setInterval(intOption, 500);
-
   watch(
     [selectedValue, options],
     () => {
@@ -178,11 +178,17 @@ const handleClear = () => {
   }
 };
 
+const handleHide = () => {
+  searchValue.value = "";
+  openState.value = false;
+};
+
 provide("selectRef", selectRef);
 provide("openState", openState);
 provide("selectedValue", selectedValue);
 provide("searchValue", searchValue);
 provide("multiple", multiple);
+provide("searchMethod", props.searchMethod);
 </script>
 
 <template>
@@ -194,22 +200,27 @@ provide("multiple", multiple);
       :contentStyle="contentStyle"
       :update-at-scroll="true"
       :autoFitWidth="true"
-      @hide="openState = false"
+      @hide="handleHide"
       @show="openState = true"
     >
       <lay-tag-input
         v-if="multiple"
         v-model="multipleValue"
+        v-model:input-value="searchValue"
         :allow-clear="allowClear"
         :placeholder="placeholder"
         :collapseTagsTooltip="collapseTagsTooltip"
         :minCollapsedNum="minCollapsedNum"
-        :disabledInput="true"
         :disabled="disabled"
+        :disabledInput="!showSearch"
         :size="size"
         :class="{ 'layui-unselect': true }"
         @remove="handleRemove"
         @clear="handleClear"
+        @input-value-change="handleSearch"
+        @keyup.delete.capture.prevent.stop
+        @keyup.backspace.capture.prevent.stop
+        @keydown.enter.capture.prevent.stop
       >
         <template #suffix>
           <lay-icon
@@ -220,13 +231,13 @@ provide("multiple", multiple);
       </lay-tag-input>
       <lay-input
         v-else
-        :modelValue="singleValue"
-        :placeholder="placeholder"
-        :allow-clear="allowClear"
-        :readonly="!showSearch"
-        :disabled="disabled"
-        :class="{ 'layui-unselect': !showSearch }"
         :size="size"
+        :disabled="disabled"
+        :readonly="!showSearch"
+        :modelValue="singleValue"
+        :allow-clear="allowClear"
+        :placeholder="placeholder"
+        :class="{ 'layui-unselect': !showSearch }"
         @compositionstart="onCompositionstart"
         @compositionend="onCompositionend"
         @Input="handleSearch"
@@ -241,17 +252,6 @@ provide("multiple", multiple);
       </lay-input>
       <template #content>
         <dl class="layui-select-content">
-          <div class="layui-select-search" v-if="multiple && showSearch">
-            <lay-input
-              :modelValue="searchValue"
-              :placeholder="searchPlaceholder"
-              @Input="handleSearch"
-              @compositionstart="onCompositionstart"
-              @compositionend="onCompositionend"
-              prefix-icon="layui-icon-search"
-              size="sm"
-            ></lay-input>
-          </div>
           <template v-if="items">
             <lay-select-option
               v-for="(item, index) in items"