[新增] select组件支持关键词筛选列表

example/docs/zh-CN/components/select.md

@@ -4,7 +4,7 @@
 ::: title 基本介绍
 :::
 
-::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。
+::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询
 :::
 
 ::: title 基础使用
@@ -40,10 +40,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-button @click="change1">切换-当前值 : {{value}}</lay-button>
+  <lay-button @click="change1">切换-当前值 : {{value2}}</lay-button>
   <br/>
   <br/>
-  <lay-select v-model="value">
+  <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>
@@ -55,13 +55,13 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const value = ref(null);
+    const value2 = ref(null);
     var i = 1;
     function change1(){
-      value.value=i++%3+1
+      value2.value=i++%3+1
     }
     return {
-      value,
+      value2,
       change1
     }
   }
@@ -106,7 +106,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-select v-model="selected">
+  <lay-select v-model="selected2">
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="3" label="运动"></lay-select-option>
     <lay-select-option value="1" label="学习"></lay-select-option>
@@ -132,10 +132,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const selected = ref('1')
+    const selected2 = ref('1')
 
     return {
-      selected
+      selected2
     }
   }
 }

src/component/select/index.vue

@@ -96,6 +96,22 @@ watch(props, () => {
 
 // 禁止操作子项
 const disabledItemMap: { [key: string | number]: boolean } = {};
+const txt = ref("")
+const input = ref(false)
+const value = computed({
+  set(v: any) {
+    txt.value = v;
+  },
+  get() {
+    if (input.value) {
+      return txt.value;
+    }
+    // return txt.value;
+    return !selectItem.value.multiple && selectItem.value.value !== null
+      ? selectItem.value.label
+      : null
+  }
+})
 const selectItemHandle = function (
   _selectItem: SelectItem,
   isChecked?: boolean
@@ -103,6 +119,7 @@ const selectItemHandle = function (
   if (!props.multiple) {
     openState.value = false;
   }
+  txt.value = ""
   disabledItemMap[_selectItem.value as string | number] =
     _selectItem.disabled as boolean;
   if (typeof isChecked !== "boolean") {
@@ -144,6 +161,7 @@ const selectItemPush = function (p: SelectItem) {
 provide("selectItemHandle", selectItemHandle);
 provide("selectItemPush", selectItemPush);
 provide("selectItem", selectItem);
+provide("keyword", txt)
 </script>
 
 <template>
@@ -163,12 +181,9 @@ provide("selectItem", selectItem);
             : emptyMessage ?? placeholder
         "
         :disabled="disabled"
-        readonly
-        :value="
-          !selectItem.multiple && selectItem.value !== null
-            ? selectItem.label
-            : null
-        "
+        v-model="value"
+        @input="input = true"
+        @blur="input = false"
         :name="name"
         :class="[
           'layui-input',
@@ -204,8 +219,7 @@ provide("selectItem", selectItem);
                       : null,
                   })
                 "
-              >
-              </i>
+              ></i>
             </lay-badge>
           </template>
         </div>

src/component/selectOption/index.vue

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
 const selectItem = inject("selectItem") as Ref<SelectItem>;
 const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
+const keyword = inject('keyword') as Ref<string>
 
 const selectHandle = function () {
   !props.disabled && callSelectItemHandle(!selected.value);
@@ -64,17 +65,13 @@ onMounted(() => {
 
 <template>
   <dd
+    v-show="keyword ? props.label.includes(keyword) : true"
     :value="value"
     :class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
     @click="selectHandle"
   >
     <template v-if="selectItem.multiple">
-      <lay-checkbox
-        skin="primary"
-        v-model="selected"
-        @change="selectHandle"
-        label=""
-      />
+      <lay-checkbox skin="primary" v-model="selected" @change="selectHandle" label />
     </template>
     <slot>{{ label }}</slot>
   </dd>