Merge pull request #2122 from lkjh3214/V4_input

feat(input): 当显示清除按钮时，新增props：input失去焦点后，是否展示清除按钮

src/packages/__VUE/input/demo.vue

@@ -20,6 +20,7 @@
       clearSize="14"
       show-word-limit
       max-length="50"
+      :showClearIcon="true"
     >
       <template #clear>
         <Close width="12" height="12" @click="clearValue"></Close>

src/packages/__VUE/input/doc.en-US.md

@@ -131,7 +131,7 @@ Use `readonly` to set the input box to read-only status, and use `disabled` to s
 
 ### Show Clear Icon
 
-Display the clear icon during the input process by setting `clearable`.
+Display the clear icon during input by setting 'clearable'. The clear button will be hidden after losing focus. You can set the clear button to continue to display after losing focus through 'showClearIcon'.
 
 :::demo
 
@@ -150,6 +150,7 @@ Display the clear icon during the input process by setting `clearable`.
     clearSize="14"
     show-word-limit
     max-length="50"
+    :showClearIcon="true"
   >
     <template #clear>
       <Close width="12" height="12" @click="clearValue"></Close>
@@ -416,6 +417,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 | autofocus    | Whether to auto focus, unsupported in iOS     | boolean        | `false` |
 | max-length   | Max length of value                  | string ｜ number | - |
 | clearable    | Whether to be clearable              | boolean        | `false`  |
+| showClearIcon `4.0.2` | Whether to continue to display the clear button after losing focus, which will take effect when 'clearable' is set | boolean        | `false`  |
 | clear-size   | Clear Icon `font-size`               | string        | `14`  |
 | show-word-limit | Whether to show word limit, need to set the `max-length` prop | boolean | `false`  |
 | error         | Whether to mark the input content in red   | boolean | `false`  |

src/packages/__VUE/input/doc.md

@@ -132,7 +132,7 @@ app.use(Button);
 
 ### 显示清除图标
 
-通过设置 `clearable` 在输入过程中展示清除图标。
+通过设置 `clearable` 在输入过程中展示清除图标。清除按钮，在失去焦点后将隐藏,可通过 `showClearIcon` 设置失去焦点后继续展示清除按钮。
 
 :::demo
 
@@ -151,6 +151,7 @@ app.use(Button);
     clearSize="14"
     show-word-limit
     max-length="50"
+    :showClearIcon="true"
   >
     <template #clear>
       <Close width="12" height="12" @click="clearValue"></Close>
@@ -419,6 +420,7 @@ app.use(Button);
 | autofocus    | 是否自动获得焦点，`iOS` 系统不支持该属性     | boolean        | `false` |
 | max-length   | 限制最长输入字符                       | string ｜ number | - |
 | clearable    | 展示清除 `Icon`                         | boolean        | `false`  |
+| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效 | boolean        | `false`  |
 | clear-size   | 清除图标的 `font-size` 大小           | string        | `14`  |
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false`  |
 | error         | 是否标红                                | boolean | `false`  |

src/packages/__VUE/input/doc.taro.md

@@ -132,7 +132,7 @@ app.use(Button);
 
 ### 显示清除图标
 
-通过设置 `clearable` 在输入过程中展示清除图标。
+通过设置 `clearable` 在输入过程中展示清除图标。清除按钮，在失去焦点后将隐藏,可通过 `showClearIcon` 设置失去焦点后继续展示清除按钮。
 
 :::demo
 
@@ -151,6 +151,7 @@ app.use(Button);
     clearSize="14"
     show-word-limit
     max-length="50"
+    :showClearIcon="true"
   >
     <template #clear>
       <Close width="12" height="12" size="12" @click="clearValue"></Close>
@@ -432,6 +433,7 @@ app.use(Button);
 | autofocus    | 是否自动获得焦点，`iOS` 系统不支持该属性     | boolean        | `false` |
 | max-length      | 限制最长输入字符                       | string ｜ number | - |
 | clearable    | 展示清除 `Icon`                         | boolean        | `false`  |
+| showClearIcon `4.0.2` | 是否在失去焦点后，继续展示清除按钮，在设置 `clearable` 时生效 | boolean        | `false`  |
 | clear-size   | 清除图标的 `font-size` 大小           | string        | `14`  |
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | boolean | `false`  |
 | error         | 是否标红                                | boolean | `false`  |

src/packages/__VUE/input/index.scss

@@ -110,9 +110,11 @@ textarea {
   }
   &-clear-box {
     height: 100%;
-    .nut-input-clear {
-      vertical-align: -2px;
-    }
+    display: flex;
+    align-items: center;
+    // .nut-input-clear {
+    //   vertical-align: -2px;
+    // }
   }
   &-clear {
     width: 16px;

src/packages/__VUE/input/index.taro.vue

@@ -35,7 +35,11 @@
             >/{{ maxLength }}
           </view>
         </view>
-        <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
+        <view
+          class="nut-input-clear-box"
+          v-if="clearable && !readonly"
+          v-show="(active || showClearIcon) && modelValue.length > 0"
+        >
           <slot name="clear">
             <MaskClose
               class="nut-input-clear"
@@ -153,6 +157,10 @@ export default create({
     alwaysSystem: {
       type: Boolean,
       default: false
+    },
+    showClearIcon: {
+      type: Boolean,
+      default: false
     }
   },
   components: { MaskClose },

src/packages/__VUE/input/index.vue

@@ -32,7 +32,11 @@
             >/{{ maxLength }}
           </view>
         </view>
-        <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
+        <view
+          class="nut-input-clear-box"
+          v-if="clearable && !readonly"
+          v-show="(active || showClearIcon) && modelValue.length > 0"
+        >
           <slot name="clear">
             <MaskClose
               class="nut-input-clear"
@@ -141,6 +145,10 @@ export default create({
     error: {
       type: Boolean,
       default: false
+    },
+    showClearIcon: {
+      type: Boolean,
+      default: false
     }
   },
   components: { MaskClose },

src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue

@@ -23,6 +23,7 @@
       clearSize="14"
       show-word-limit
       max-length="50"
+      :showClearIcon="true"
     >
       <template #clear>
         <Close width="12" height="12" size="12" @click="clearValue"></Close>