feat(Field): add clear-trigger prop (#6699)

src/field/README.md

@@ -100,7 +100,7 @@ export default {
 
 ### Error Info
 
-Use `error` or `error-message` to show error info
+Use `error` or `error-message` to show error info.
 
 ```html
 <van-cell-group>
@@ -123,7 +123,7 @@ Use `error` or `error-message` to show error info
 
 ### Insert Button
 
-Use button slot to insert button
+Use button slot to insert button.
 
 ```html
 <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
@@ -135,7 +135,7 @@ Use button slot to insert button
 
 ### Format Value
 
-Use `formatter` prop to format the input value
+Use `formatter` prop to format the input value.
 
 ```html
 <van-field
@@ -171,7 +171,7 @@ export default {
 
 ### Auto Resize
 
-Textarea Field can be auto resize when has `autosize` prop
+Textarea Field can be auto resize when has `autosize` prop.
 
 ```html
 <van-field
@@ -201,7 +201,7 @@ Textarea Field can be auto resize when has `autosize` prop
 
 ### Input Align
 
-Use `input-align` prop to align the input value
+Use `input-align` prop to align the input value.
 
 ```html
 <van-field
@@ -232,6 +232,7 @@ Use `input-align` prop to align the input value
 | required | Whether to show required mark | _boolean_ | `false` |
 | center | Whether to center content vertically | _boolean_ | `true` |
 | clearable | Whether to be clearable | _boolean_ | `false` |
+| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
 | clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
 | is-link | Whether to show link icon | _boolean_ | `false` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |

src/field/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 介绍
 
-表单中的输入框组件
+表单中的输入框组件。
 
 ### 引入
 
@@ -256,7 +256,8 @@ export default {
 | colon `v2.7.2` | 是否在 label 后面添加冒号 | _boolean_ | `false` |
 | required | 是否显示表单必填星号 | _boolean_ | `false` |
 | center | 是否使内容垂直居中 | _boolean_ | `false` |
-| clearable | 是否启用清除控件 | _boolean_ | `false` |
+| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `false` |
+| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | clickable | 是否开启点击反馈 | _boolean_ | `false` |
 | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |

src/field/index.js

@@ -69,6 +69,10 @@ export default createComponent({
       type: Boolean,
       default: null,
     },
+    clearTrigger: {
+      type: String,
+      default: 'focus',
+    },
     formatTrigger: {
       type: String,
       default: 'onChange',
@@ -109,13 +113,14 @@ export default createComponent({
 
   computed: {
     showClear() {
-      return (
+      if (this.clearable && !this.readonly) {
-        this.clearable &&
+        const hasValue = isDef(this.value) && this.value !== '';
-        this.focused &&
+        const trigger =
-        this.value !== '' &&
+          this.clearTrigger === 'always' ||
-        isDef(this.value) &&
+          (this.clearTrigger === 'focus' && this.focused);
-        !this.readonly
+
-      );
+        return hasValue && trigger;
+      }
     },
 
     showError() {

src/field/test/__snapshots__/index.spec.js.snap

@@ -9,7 +9,7 @@ exports[`arrow-direction prop 1`] = `
 </div>
 `;
 
-exports[`clearable 1`] = `
+exports[`clearable prop 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"></div>
@@ -17,7 +17,7 @@ exports[`clearable 1`] = `
 </div>
 `;
 
-exports[`clearable 2`] = `
+exports[`clearable prop 2`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone van-field__value">
     <div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">

src/field/test/index.spec.js

@@ -184,7 +184,7 @@ test('maxlength', async () => {
   expect(wrapper.emitted('input')[0][0]).toEqual('123');
 });
 
-test('clearable', () => {
+test('clearable prop', () => {
   const wrapper = mount(Field, {
     propsData: {
       value: 'test',
@@ -202,6 +202,18 @@ test('clearable', () => {
   expect(wrapper.emitted('clear')[0][0]).toBeTruthy();
 });
 
+test('clear-trigger prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'test',
+      clearable: true,
+      clearTrigger: 'always',
+    },
+  });
+
+  expect(wrapper.contains('.van-field__clear')).toBeTruthy();
+});
+
 test('render input slot', () => {
   const wrapper = mount(Field, {
     scopedSlots: {