Merge pull request #487 from jxzho/master

Optimize Clearable Component Input & Select
FightingDesign · Jun 15, 2024 · c1ecb14 · c1ecb14
2 parents 5e50465 + 816c4b9
commit c1ecb14
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/packages/fighting-design/input/src/input.vue b/packages/fighting-design/input/src/input.vue
@@ -6,6 +6,7 @@
   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'
 
@@ -26,6 +27,8 @@
   const showPass = ref<boolean>(false)
   /** type 类型 */
   const inputType = ref<InputType>(prop.type)
+  /** 鼠标是否悬浮 */
+  const isHover = ref(false)
 
   watchEffect(() => {
     inputType.value = prop.type
@@ -70,6 +73,10 @@
     showPass.value = false
   }
 
+  const handleHover = debounce((bool: boolean) => {
+    isHover.value = bool
+  }, 50)
+
   /** 样式列表 */
   const style = styles(['placeholderColor', 'textColor', 'width', 'height', 'fontSize'])
 
@@ -80,7 +87,11 @@
 <template>
   <div role="input" :class="classList" :style="style">
     <!-- 容器盒子 -->
-    <div class="f-input__wrapper">
+    <div
+      class="f-input__wrapper"
+      @mouseenter="handleHover(true)"
+      @mouseleave="handleHover(false)"
+    >
       <!-- 前缀插槽 -->
       <slot name="before" />
 
@@ -110,7 +121,7 @@
 
       <!-- 清除 icon -->
       <f-svg-icon
-        v-if="clear"
+        v-if="clear && isHover && modelValue"
         class="f-input__clear-btn"
         :icon="FIconCross"
         :size="14"
@@ -133,7 +144,7 @@
       />
 
       <!-- 后缀插槽 -->
-      <slot name="after" />
+      <slot name="after" :is-hover="isHover" />
     </div>
 
     <!-- 搜索框 -->

diff --git a/packages/fighting-design/select/src/select.vue b/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, toRef, nextTick } from 'vue'
+  import { provide, ref, reactive, nextTick } from 'vue'
   import { FDropdown } from '../../dropdown'
   import { FSvgIcon } from '../../svg-icon'
   import { FEmpty } from '../../empty'
@@ -143,8 +143,9 @@
         :on-blur="inputBlur"
         :on-input="filter ? inputInput : void 0"
       >
-        <template #after>
+        <template #after="{ isHover }">
           <f-svg-icon
+            v-if="!isHover && filter && isFiltering"
             color="#bababa"
             :class="['f-select__arrow', { 'f-select__arrow-active': isFocus }]"
             :size="13"