feature: input组件新增属性支持hover时才显示清除按钮 #20 (#150)

Co-authored-by: vincenttgao <vincenttgao@tencent.com>
TencentBlueKing · Nov 6, 2021 · 64b909c · 64b909c
1 parent e83edc5
commit 64b909c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/example/components/input/readme.md b/example/components/input/readme.md
@@ -98,6 +98,37 @@
 ```
 :::
 
+### hover 时才显示 clear 按钮{page=#/input}
+
+::: demo 配置`show-clear-only-hover`为true时，清除按钮在hover时才会显示
+``` html
+<template>
+    <div class="input-demo">
+        <bk-input :clearable="true" v-model="value" :show-clear-only-hover="true"></bk-input>
+    </div>
+</template>
+<script>
+    import { bkInput } from '{{BASE_LIB_NAME}}'
+
+    export default {
+        components: {
+            bkInput
+        },
+        data () {
+            return {
+                value: ''
+            }
+        }
+    }
+</script>
+<style lang="postcss">
+    .input-demo {
+        width: 500px;
+    }
+</style>
+```
+:::
+
 ### 14px 字号 {page=#/input}
 
 ::: demo 通过配置 `font-size` 属性为 `medium` 来设置文本框的字号为 `14px`
@@ -656,6 +687,7 @@
 | native-attributes | Html input标签原生属性设置 | Object | —— | —— |
 | show-word-limit | 是否显示输入字数统计，只在 `type = "text"` 或 `type = "textarea"` 时有效 | Boolean | true / false | —— |
 | behavior | 简约风格设置(simplicity:简约 normal:正常 type=textarea时不生效) | String | 'normal'/'simplicity' | normal |
+| show-clear-only-hover | 是否在只有 hover 的时候才显示 clear 清除按钮 | Boolean | —— | false |
 
 ### 事件 {page=#/input}
 

diff --git a/src/components/input/input.vue b/src/components/input/input.vue
@@ -27,7 +27,7 @@
 -->
 
 <template>
-    <div :class="[wrapperClass, fontSizeCls, extCls]">
+    <div :class="[wrapperClass, fontSizeCls, extCls]" @mouseenter="hover = true" @mouseleave="hover = false">
         <div class="control-icon left-icon" v-if="leftIcon" @click="handlerLeftIcon">
             <i :class="['bk-icon', leftIcon]"></i>
         </div>
@@ -101,7 +101,7 @@
                     ? inputPasswordIcon[0]
                     : inputPasswordIcon[1]
             ]"></i>
-            <i @click.stop.prevent="handlerClear" class="bk-icon icon-close-circle-shape clear-icon ml5" v-if="clearable && curValue && !disabled"></i>
+            <i @click.stop.prevent="handlerClear" class="bk-icon icon-close-circle-shape clear-icon ml5" v-if="showClearIcon"></i>
             <i :class="['bk-icon', rightIcon]" v-else-if="rightIcon"></i>
             <template v-if="type === 'text'">
                 <p class="bk-limit-box ml5" style="position: static" v-show="showInputWordLimit">
@@ -261,10 +261,15 @@
                 validate (v) {
                     return ['simplicity', 'normal'].indexOf(v) > -1
                 }
+            },
+            showClearOnlyHover: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
+                hover: false,
                 curValue: '',
                 prepend: false,
                 append: false,
@@ -284,6 +289,16 @@
             }
         },
         computed: {
+            /**
+             * 不显示条件：
+             * 1. 设置不可清除
+             * 2. 禁用时
+             * 3. input为空时
+             * 4. 设置了showClearOnlyHover，且没有hover的时候
+             */
+            showClearIcon () {
+                return this.clearable && this.curValue && !this.disabled && (this.showClearOnlyHover ? this.hover : true)
+            },
             showPwdVisable () {
                 return this.type === 'password'
                     && this.curValue