feat: 新增 select 配置项

packages/fighting-design/_hooks/use-input/index.ts

@@ -52,6 +52,7 @@ export const useInput = (
    * @param { Object } evt 事件对象
    */
   const handleInput = (evt: Event): void => {
+    console.log(modelValue.value)
     run(prop.onInput, modelValue.value, evt)
   }
 

packages/fighting-design/select/src/props.ts

@@ -39,6 +39,8 @@ export const Props = {
   placeholder: setStringProp(),
   /** 是否可清除 */
   clear: setBooleanProp(),
+  /** 是否可模糊搜索过滤 */
+  filter: setBooleanProp(),
   /**
    * 是否禁用
    *

packages/fighting-design/select/src/select.vue

@@ -9,6 +9,7 @@
   import { FIconChevronDown } from '../../_svg'
   import type { VNode, Slots } from 'vue'
   import type { SelectProvide, SelectModelValue, SelectChildren } from './interface'
+  import type { InputUpdate } from '../../input'
 
   defineOptions({ name: 'FSelect' })
 
@@ -22,10 +23,40 @@
   const { run } = useRun()
   const { styles } = useList(prop, 'select')
 
+  /**
+   * 获取子元素 option
+   *
+   * 通过插槽插入的内容，过滤出有效的子元素返回
+   */
+  const options = computed((): VNode[] => {
+    // 如果没有插槽内容，返回空数组
+    if (!slot.default) return []
+
+    const childrens = getChildren(slot.default(), 'FOption')
+
+    if (prop.filter && modelValue.value.toString()) {
+      childrens.map((item: VNode) => {
+        /** 获取到当前子元素的插槽内容 */
+        const slot: string | undefined =
+          item.children && (item.children as { default: Function }).default()[0].children
+
+        console.log(slot)
+      })
+    }
+
+    console.log(childrens)
+
+    return childrens
+  })
+
   /** 当前绑定的值 */
   const keyword = computed({
     get: (): string => {
-      /** 如果插槽没内容，则返回空字符串 */
+      if (prop.filter) {
+        return modelValue.value.toString()
+      }
+
+      // 如果插槽没内容，则返回空字符串
       if (!options.value.length) return ''
 
       /**
@@ -71,22 +102,14 @@
       /** 获取到当前子元素的 value 参数 */
       const value: string | undefined = firstChildren.props?.value
 
-      /** 返回优先级：插槽 > label > value */
+      // 返回优先级：插槽 > label > value
       return slot || label || (value && value.toString()) || ''
     },
-    set: (val: string): string => val
-  })
-
-  /**
-   * 获取子元素 option
-   *
-   * 通过插槽插入的内容，过滤出有效的子元素返回
-   */
-  const options = computed((): VNode[] => {
-    /** 如果没有插槽内容，返回空数组 */
-    if (!slot.default) return []
-
-    return getChildren(slot.default(), 'FOption')
+    set: (val: string): string => {
+      console.log('set')
+      modelValue.value = val
+      return val
+    }
   })
 
   /**
@@ -145,21 +168,26 @@
       active.scrollIntoView({ block: 'end' })
     }
   }
+
+  const inputInput: InputUpdate = (value: string): void => {
+    console.log(value)
+  }
 </script>
 
 <template>
   <div class="f-select" :style="styleList">
     <f-dropdown trigger="click" :disabled="disabled" :width="width" :on-open="onOpen">
       <f-input
         v-model="keyword"
-        readonly
+        :readonly="!filter"
         :name="name"
         :size="size"
         :disabled="disabled"
         :placeholder="placeholder"
         :clear="clear"
         :on-focus="() => (isFocus = true)"
         :on-blur="() => (isFocus = false)"
+        :on-input="filter ? inputInput : undefined"
       >
         <template #after>
           <f-svg-icon

start/src/App.vue

@@ -1,5 +1,22 @@
-<script lang="ts" setup></script>
+<template>
+  {{ value }}
+  <f-select v-model="value" placeholder="请选择……" filter>
+    <f-option>香蕉</f-option>
+    <f-option>苹果</f-option>
+    <f-option>哈密瓜</f-option>
+    <f-option>樱桃</f-option>
+  </f-select>
 
-<template></template>
+  <!-- <f-input v-model="value1" :on-input="inp"></f-input> -->
+</template>
 
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const value = ref('')
+  const value1 = ref('')
+
+  const inp = (v, e) => {
+    console.log(v, e)
+  }
+</script>