🐛(component): 修复 icon-picker 组件 show-search 属性开启时, 无法搜索的问题

package/component/src/component/iconPicker/index.vue

@@ -81,7 +81,7 @@ const search = (e: any) => {
   currentPage.value = 1;
   const start = (currentPage.value - 1) * 12;
   const end = start + 12;
-  const text = e.target.value;
+  const text = e;
   if (text) {
     if (props.page) {
       icones.value = searchList(text, icons).slice(start, end);

package/component/src/component/select/index.less

@@ -5,7 +5,6 @@
 
 .layui-select {
   width: 220px;
-
   .layui-tag-input{
     width: 220px;
     &-clear{

package/component/src/component/select/index.vue

@@ -1,191 +1,203 @@
 <script lang="ts">
-  export default {
-    name: "LaySelect",
-  };
-  </script>
-  
-  <script setup lang="ts">
-  import "./index.less";
-  import {
-    provide,
-    computed,
-    ref,
-    Ref,
-    useSlots,
-    onMounted,
-    VNode,
-    Component,
-    watch,
-  } from "vue";
-  import LayInput from "../input/index.vue";
-  import LayTagInput from "../tagInput/index.vue";
-  import LayDropdown from "../dropdown/index.vue";
-  import LaySelectOption, {
-    LaySelectOptionProps,
-  } from "../selectOption/index.vue";
-  
-  export interface LaySelectProps {
-    name?: string;
-    create?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    showEmpty?: boolean;
-    emptyMessage?: string;
-    modelValue?: any;
-    multiple?: boolean;
-    items?: LaySelectOptionProps[];
-    size?: "lg" | "md" | "sm" | "xs";
-    collapseTagsTooltip?: boolean;
-    minCollapsedNum?: number;
-    allowClear?: boolean;
+export default {
+  name: "LaySelect",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import {
+  provide,
+  computed,
+  ref,
+  Ref,
+  useSlots,
+  onMounted,
+  VNode,
+  Component,
+  watch,
+} from "vue";
+import LayInput from "../input/index.vue";
+import LayTagInput from "../tagInput/index.vue";
+import LayDropdown from "../dropdown/index.vue";
+import LaySelectOption, {
+  LaySelectOptionProps,
+} from "../selectOption/index.vue";
+
+export interface LaySelectProps {
+  name?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  showEmpty?: boolean;
+  emptyMessage?: string;
+  modelValue?: any;
+  multiple?: boolean;
+  items?: LaySelectOptionProps[];
+  size?: "lg" | "md" | "sm" | "xs";
+  collapseTagsTooltip?: boolean;
+  minCollapsedNum?: number;
+  allowClear?: boolean;
+  showSearch?: boolean;
+}
+
+export interface SelectEmits {
+  (e: "update:modelValue", value: string): void;
+  (e: "change", value: string): void;
+}
+
+const props = withDefaults(defineProps<LaySelectProps>(), {
+  modelValue: null,
+  placeholder: "请选择",
+  showEmpty: true,
+  emptyMessage: "请选择",
+  collapseTagsTooltip: true,
+  minCollapsedNum: 3,
+  disabled: false,
+  multiple: false,
+  size: "md",
+  allowClear: false,
+  showSearch: false
+});
+
+const slots = useSlots();
+const searchValue = ref("");
+const singleValue = ref("");
+const multipleValue = ref([]);
+const openState: Ref<boolean> = ref(false);
+const selectedItem: Ref<any> = ref([]);
+const options = ref<any>([]);
+const emits = defineEmits<SelectEmits>();
+
+onMounted(() => {
+  if (slots.default) {
+    getOption(slots.default());
   }
-  
-  export interface SelectEmits {
-    (e: "update:modelValue", value: string): void;
-    (e: "change", value: string): void;
-  }
-  
-  const props = withDefaults(defineProps<LaySelectProps>(), {
-    modelValue: null,
-    placeholder: "请选择",
-    showEmpty: true,
-    emptyMessage: "请选择",
-    collapseTagsTooltip: true,
-    minCollapsedNum: 3,
-    disabled: false,
-    multiple: false,
-    create: false,
-    size: "md",
-    allowClear: false,
-  });
-  
-  const slots = useSlots();
-  const searchValue = ref("");
-  const singleValue = ref("");
-  const multipleValue = ref([]);
-  const openState: Ref<boolean> = ref(false);
-  const selectedItem: Ref<any> = ref([]);
-  const options = ref<any>([]);
-  const emits = defineEmits<SelectEmits>();
-  
-  onMounted(() => {
-    if (slots.default) {
-      getOption(slots.default());
-    }
-  
-    Object.assign(options.value, props.items);
-  
-    watch(
-      selectedValue,
-      () => {
-        if (multiple.value) {
-          multipleValue.value = selectedValue.value.map((value: any) => {
-            return options.value.find((item: any) => {
-              item.disabled == "" || item.disabled == true ? item.closable = false : item.closable = true;
-              return item.value === value;
-            });
-  
+
+  Object.assign(options.value, props.items);
+
+  watch(
+    selectedValue,
+    () => {
+      if (multiple.value) {
+        multipleValue.value = selectedValue.value.map((value: any) => {
+          return options.value.find((item: any) => {
+            item.disabled == "" || item.disabled == true
+              ? (item.closable = false)
+              : (item.closable = true);
+            return item.value === value;
           });
-        } else {
-          singleValue.value = options.value.find((item: any) => {
-            return item.value === selectedValue.value;
-          })?.label;
-        }
-      },
-      { immediate: true }
-    );
-  });
-  
-  const getOption = function (nodes: VNode[]) {
-    nodes?.map((item: VNode) => {
-      let component = item.type as Component;
-      if (component.name === LaySelectOption.name) {
-        options.value.push(item.props);
+        });
       } else {
-        getOption(item.children as VNode[]);
+        searchValue.value = "";
+        singleValue.value = options.value.find((item: any) => {
+          return item.value === selectedValue.value;
+        })?.label;
       }
-    });
-  };
-  
-  const selectedValue = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(val) {
-      emits("update:modelValue", val);
-      emits("change", val);
     },
+    { immediate: true }
+  );
+});
+
+const handleSearch = (value: string) => {
+  searchValue.value = value;
+}
+
+const getOption = function (nodes: VNode[]) {
+  nodes?.map((item: VNode) => {
+    let component = item.type as Component;
+    if (component.name === LaySelectOption.name) {
+      options.value.push(item.props);
+    } else {
+      getOption(item.children as VNode[]);
+    }
   });
-  
-  const multiple = computed(() => {
-    return props.multiple;
-  });
-  
-  provide("openState", openState);
-  provide("selectedItem", selectedItem);
-  provide("selectedValue", selectedValue);
-  provide("searchValue", searchValue);
-  provide("multiple", multiple);
-  </script>
-  
-  <template>
-    <div class="layui-select">
-      <lay-dropdown
-        :disabled="disabled"
-        :update-at-scroll="true"
-        @show="openState = true"
-        @hide="openState = false"
+};
+
+const selectedValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emits("update:modelValue", val);
+    emits("change", val);
+  },
+});
+
+const multiple = computed(() => {
+  return props.multiple;
+});
+
+provide("openState", openState);
+provide("selectedItem", selectedItem);
+provide("selectedValue", selectedValue);
+provide("searchValue", searchValue);
+provide("multiple", multiple);
+</script>
+
+<template>
+  <div class="layui-select">
+    <lay-dropdown
+      :disabled="disabled"
+      :update-at-scroll="true"
+      @show="openState = true"
+      @hide="openState = false"
+    >
+      <lay-tag-input
+        v-if="multiple"
+        v-model="multipleValue"
+        :allow-clear="allowClear"
+        :placeholder="placeholder"
+        :collapseTagsTooltip="collapseTagsTooltip"
+        :minCollapsedNum="minCollapsedNum"
+        :disabledInput="true"
       >
-        <lay-tag-input
-          v-if="multiple"
-          v-model="multipleValue"
-          :allow-clear="allowClear"
-          :collapseTagsTooltip="collapseTagsTooltip"
-          :minCollapsedNum="minCollapsedNum"
-          :disabledInput="true"
-        >
-          <template #suffix>
-            <lay-icon
-              type="layui-icon-triangle-d"
-              :class="{ triangle: openState }"
-            ></lay-icon>
-          </template>
-        </lay-tag-input>
-        <lay-input
-          v-else
-          v-model="singleValue"
-          :placeholder="placeholder"
-          :allow-clear="allowClear"
-          :readonly="true"
-        >
-          <template #suffix>
-            <lay-icon
-              type="layui-icon-triangle-d"
-              :class="{ triangle: openState }"
-            ></lay-icon>
-          </template>
-        </lay-input>
-        <template #content>
-          <dl class="layui-select-options">
-            <div class="layui-select-search" v-if="multiple">
-              <lay-input
-                v-model="searchValue"
-                prefix-icon="layui-icon-search"
-                placeholder="请搜索"
-                size="sm"
-              ></lay-input>
-            </div>
-            <lay-select-option v-if="showEmpty && !multiple" :label="emptyMessage" value=""></lay-select-option>
-            <template v-if="items">
-              <lay-select-option
-                v-for="(item, index) in items"
-                v-bind="item"
-                :key="index"
-              ></lay-select-option>
-            </template>
-            <slot></slot>
-          </dl>
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
         </template>
-      </lay-dropdown>
-    </div>
-  </template>
+      </lay-tag-input>
+      <lay-input
+        v-else
+        v-model="singleValue"
+        :placeholder="placeholder"
+        :allow-clear="allowClear"
+        :readonly="!showSearch"
+        @Input="handleSearch"
+      >
+        <template #suffix>
+          <lay-icon
+            type="layui-icon-triangle-d"
+            :class="{ triangle: openState }"
+          ></lay-icon>
+        </template>
+      </lay-input>
+      <template #content>
+        <dl class="layui-select-options">
+          <div class="layui-select-search" v-if="multiple && showSearch">
+            <lay-input
+              v-model="searchValue"
+              prefix-icon="layui-icon-search"
+              placeholder="请搜索"
+              size="sm"
+            ></lay-input>
+          </div>
+          <lay-select-option
+            v-if="showEmpty && !multiple"
+            :label="emptyMessage"
+            value=""
+          ></lay-select-option>
+          <template v-if="items">
+            <lay-select-option
+              v-for="(item, index) in items"
+              v-bind="item"
+              :key="index"
+            ></lay-select-option>
+          </template>
+          <slot></slot>
+        </dl>
+      </template>
+    </lay-dropdown>
+  </div>
+</template>

package/component/src/component/selectOption/index.vue

@@ -53,22 +53,23 @@ const selected = computed(() => {
 });
 
 const select = () => {
-  const info = {
-    label: props.label,
-    value: props.value,
-    dispabled: props.disabled,
-    keyword: props.keyword,
-  };
 
-  if (multiple.value) {
-    if (Array.isArray(selectedItem.value)) {
-      if (notChecked.value) selectedItem.value.push(info);
+    const info = {
+      label: props.label,
+      value: props.value,
+      dispabled: props.disabled,
+      keyword: props.keyword,
+    };
+
+    if (multiple.value) {
+      if (Array.isArray(selectedItem.value)) {
+        if (notChecked.value) selectedItem.value.push(info);
+      } else {
+        selectedItem.value = [info];
+      }
     } else {
-      selectedItem.value = [info];
+      selectedItem.value = info;
     }
-  } else {
-    selectedItem.value = info;
-  }
 };
 
 const display = computed(() => {

package/document-component/src/document/zh-CN/components/iconPicker.md

@@ -57,10 +57,10 @@ export default {
 
 :::
 
-::: title 开启分页 通过 page 属性开启图标列表的分页展示
+::: title 开启分页
 :::
 
-::: demo
+::: demo 通过 page 属性开启图标列表的分页展示
 
 <template>
   <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page></lay-icon-picker>
@@ -82,10 +82,10 @@ export default {
 
 :::
 
-::: title 开启搜索 通过 showSearch 开启图标列表的搜索功能
+::: title 开启搜索
 :::
 
-::: demo
+::: demo 通过 showSearch 开启图标列表的搜索功能
 
 <template>
   <lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch></lay-icon-picker>

package/document-component/src/document/zh-CN/components/select.md

@@ -35,20 +35,20 @@ export default {
 
 :::
 
-::: title 数据联动
+::: title 进阶使用
 :::
 
-::: demo
+::: demo 根据 v-model 的特性, 通过修改值更改 select 的下拉选项。
 
 <template>
-  <lay-button @click="change1">切换-当前值 : {{value2}}</lay-button>
-  <br/>
-  <br/>
-  <lay-select v-model="value2">
-    <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>
+    <lay-select v-model="value2">
+      <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-button @click="change2"> change ：{{value2}}</lay-button>
+  </lay-space>
 </template>
 
 <script>
@@ -58,12 +58,12 @@ export default {
   setup() {
     const value2 = ref(null);
     var i = 1;
-    function change1(){
+    function change2(){
       value2.value=i++%3+1
     }
     return {
       value2,
-      change1
+      change2
     }
   }
 }
@@ -71,17 +71,24 @@ export default {
 
 :::
 
-::: title 选择禁用
+::: title 开启检索
 :::
 
-::: demo
+::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。
 
 <template>
-  <lay-select v-model="selected">
+  <lay-space>
+    <lay-select v-model="value3" :show-search="true">
     <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码" disabled></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" :show-search="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>
@@ -90,10 +97,11 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const selected = ref('1')
-
+    const value3 = ref('1')
+    const value4 = ref(['1'])
     return {
-      selected
+      value3,
+      value4
     }
   }
 }
@@ -101,11 +109,40 @@ export default {
 
 :::
 
+
+::: title 传入选项
+:::
+
+::: demo 传入 options 数据，如果设置则不需要手动构造 selectOption 节点
+
+<template>
+  <lay-select v-model="value5" :items="items5"></lay-select>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value5 = ref('1');
+    const items5=ref([
+      {label:'选项1', value:1},
+      {label:'选项2', value:2},
+      {label:'选项3', value:3, disabled:true},
+    ])
+    return {
+      items5,
+      value5,
+    }
+  }
+}
+</script>
+:::
+
 ::: title 检索回调
 :::
 
 ::: demo
-
 <template>
   <lay-select @search="search" v-model="selected">
     <lay-select-option value="1" label="学习"></lay-select-option>
@@ -129,14 +166,12 @@ export default {
   }
 }
 </script>
-
 :::
 
 ::: title 定义标识
 :::
 
 ::: demo
-
 <template>
   <lay-select v-model="selected">
     <lay-select-option value="1" label="学习" keyword="学习xuexi"></lay-select-option>
@@ -157,14 +192,12 @@ export default {
   }
 }
 </script>
-
 :::
 
 ::: title 传入选项
 :::
 
 ::: demo
-
 <template>
   <lay-select v-model="selected" :items="items">
   </lay-select>
@@ -188,15 +221,12 @@ export default {
   }
 }
 </script>
-
-
 :::
 
 ::: title 创建回调
 :::
 
 ::: demo
-
 <template>
   <lay-select v-model="selected" :items="items" :create="true"  @create="createEvent"></lay-select>
 </template>
@@ -224,14 +254,12 @@ export default {
   }
 }
 </script>
-
 :::
 
 ::: title 海量数据 
 :::
 
 ::: demo
-
 <template>
   <lay-select v-model="selected2">
     <lay-select-option v-for="index of 200" :value="index" :label="index"></lay-select-option>
@@ -252,14 +280,12 @@ export default {
   }
 }
 </script>
-
 :::
 
 ::: title 多选使用
 :::
 
 ::: demo
-
 <template>
   <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
   <br/>
@@ -291,7 +317,6 @@ export default {
   }
 }
 </script>
-
 :::
 
 ::: title Select 属性

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -29,10 +29,12 @@
           <li>[修复] select 组件位于 layer 底部时, 点击时出现滚动条。</li>
           <li>[修复] select 组件与 table 组件组合使用时, 下拉内容被遮盖。</li>
           <li>[修复] select 组件多选模式下提示信息错误, 将 "请选择" 调整为 "请输入"。</li>
+          <li>[修复] icon-picker 组件 show-search 属性开启时, 搜索不生效的问题。</li>
           <li>[修复] select 组件外部修改 modelValue 值时, option 不选中的问题。</li>
           <li>[优化] page 组件 limit 逻辑, 切换 limit 后，如果页数大于当前页，保持当前页码不变，否则使用最大页码。</li>
           <li>[优化] input 组件 suffix 插槽与 allow-clear 启用时的显示顺序, clear > suffix。</li>
           <li>[优化] tag 组件 border background height 等, 使其更贴合 layui 的设计规范。</li>
+          <li>[删除] select 组件 create 属性。</li>
         </ul> 
       </li>
     </ul>