fix: 修复 input 和 select

CHANGELOG.md

@@ -10,6 +10,7 @@
 - 优化 `f-textarea` 组件整体流程度，代码近一步优化
 - `f-textarea` 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 `on-enter` 事件
 - 修复 `f-select` 组件在绑定值为空的时候没有清空输入框的问题
+- 优化 `f-up-load` 语法 [#492](https://github.com/FightingDesign/fighting-design/pull/492)
 
 ## 1.0.0-alpha.8 (2024-06-12)
 

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

@@ -6,7 +6,6 @@
   import { ref, toRefs, computed, watchEffect } from 'vue'
   import { FIconCross, FIconEyeOffOutline, FIconEyeOutline } from '../../_svg'
   import { useInput, useRun, useList, useGlobal } from '../../_hooks'
-  import { debounce } from '../../_utils'
   import type { InputType } from './interface'
   import type { UseGlobalProp } from '../../_hooks'
 
@@ -73,10 +72,6 @@
     showPass.value = false
   }
 
-  const handleHover = debounce((bool: boolean) => {
-    isHover.value = bool
-  }, 50)
-
   /** 样式列表 */
   const style = styles(['placeholderColor', 'textColor', 'width', 'height', 'fontSize'])
 
@@ -87,11 +82,7 @@
 <template>
   <div role="input" :class="classList" :style="style">
     <!-- 容器盒子 -->
-    <div
-      class="f-input__wrapper"
-      @mouseenter="handleHover(true)"
-      @mouseleave="handleHover(false)"
-    >
+    <div class="f-input__wrapper">
       <!-- 前缀插槽 -->
       <slot name="before" />
 
@@ -121,7 +112,7 @@
 
       <!-- 清除 icon -->
       <f-svg-icon
-        v-if="clear && isHover && modelValue"
+        v-if="clear"
         class="f-input__clear-btn"
         :icon="FIconCross"
         :size="14"

start/src/App.vue

@@ -1,3 +1,14 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  const value = ref('1')
+</script>
 
-<template></template>
+<template>
+  <f-input v-model="value" clear></f-input>
+  <f-select v-model="value" placeholder="请选择……" clear filter>
+    <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>