fix: 修复 f-select 组件在绑定值为空的时候没有清空输入框的问题

CHANGELOG.md

@@ -9,6 +9,7 @@
 - 修复 `f-textarea` 组件在 `resize` 不同配置项的情况下输入框错位的问题
 - 优化 `f-textarea` 组件整体流程度，代码近一步优化
 - `f-textarea` 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 `on-enter` 事件
+- 修复 `f-select` 组件在绑定值为空的时候没有清空输入框的问题
 
 ## 1.0.0-alpha.8 (2024-06-12)
 

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

@@ -2,7 +2,7 @@
   import { Props, SELECT_PROPS_TOKEN } from './props'
   import { FInput } from '../../input'
   import { useList, useRun } from '../../_hooks'
-  import { provide, ref, reactive, nextTick } from 'vue'
+  import { provide, ref, reactive, nextTick, watch } from 'vue'
   import { FDropdown } from '../../dropdown'
   import { FSvgIcon } from '../../svg-icon'
   import { FEmpty } from '../../empty'
@@ -113,6 +113,16 @@
     isFiltering.value = true
   }
 
+  // 如果绑定值为空了，则情清空文本框显示
+  watch(
+    (): SelectModelValue => modelValue.value,
+    (newValue: SelectModelValue) => {
+      if (!newValue) {
+        inputValue.value = ''
+      }
+    }
+  )
+
   // 向子组件注入依赖项
   provide<SelectProvide>(
     SELECT_PROPS_TOKEN,

start/src/App.vue

@@ -1,19 +1,3 @@
-<template>
-  <h1>{{ value || '暂无' }}</h1>
-  <f-select v-model="value" placeholder="请选择……">
-    <f-option :value="1">香蕉</f-option>
-    <f-option :value="2">苹果</f-option>
-    <f-option :value="3">哈密瓜</f-option>
-    <f-option :value="4">樱桃</f-option>
-  </f-select>
-</template>
+<script lang="ts" setup></script>
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const value = ref('')
-
-  setTimeout(() => {
-    value.value = ''
-  }, 2000)
-</script>
+<template></template>