From 2a065f85ef0e9f8cd01e5512c28638c022ac7c8e Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 1 Apr 2021 09:51:00 +0800
Subject: [PATCH] feat(Field): add clear-icon prop (#8438)

---
 src/field/Field.tsx                             | 10 +++++++++-
 src/field/README.md                             |  1 +
 src/field/README.zh-CN.md                       |  1 +
 src/field/test/__snapshots__/index.spec.js.snap |  5 +++++
 src/field/test/index.spec.js                    | 14 ++++++++++++++
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/field/Field.tsx b/src/field/Field.tsx
index 3fcf4a4bf..109ff87d5 100644
--- a/src/field/Field.tsx
+++ b/src/field/Field.tsx
@@ -97,6 +97,10 @@ export default defineComponent({
       type: Boolean,
       default: null,
     },
+    clearIcon: {
+      type: String,
+      default: 'clear',
+    },
     modelValue: {
       type: [String, Number],
       default: '',
@@ -546,7 +550,11 @@ export default defineComponent({
           <div class={bem('body')}>
             {renderInput()}
             {showClear.value && (
-              <Icon name="clear" class={bem('clear')} onTouchstart={onClear} />
+              <Icon
+                name={props.clearIcon}
+                class={bem('clear')}
+                onTouchstart={onClear}
+              />
             )}
             {renderRightIcon()}
             {slots.button && <div class={bem('button')}>{slots.button()}</div>}
diff --git a/src/field/README.md b/src/field/README.md
index 26159d636..1f0727555 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -265,6 +265,7 @@ Use `input-align` prop to align the input value.
 | autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
 | left-icon | Left side icon name | _string_ | - |
 | right-icon | Right side icon name | _string_ | - |
+| clear-icon `v3.0.12` | Clear icon name | _string_ | `clear` |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
 | rules | Form validation rules | _Rule[]_ | - |
 | autocomplete `v3.0.3` | [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute of native input element | _string_ | - |
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index e5087b169..2b9cf62df 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -288,6 +288,7 @@ export default {
 | autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
 | left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
+| clear-icon `v3.0.12` | 清除[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `clear` |
 | icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | rules | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - |
 | autocomplete `v3.0.3` | input 标签原生的[自动完成属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | _string_ | - |
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index 84d758815..065bb1b36 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change clear icon when using clear-icon prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-cross van-field__clear">
+</i>
+`;
+
 exports[`should render colon when using colon prop 1`] = `
 <div class="van-cell__title van-field__label">
   <span>
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index dc557c714..feb8f2373 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -430,3 +430,17 @@ test('should allow to set autocomplete attribute', () => {
     'on'
   );
 });
+
+test('should change clear icon when using clear-icon prop', async () => {
+  const wrapper = mount(Field, {
+    props: {
+      clearable: true,
+      clearIcon: 'cross',
+      modelValue: 'test',
+    },
+  });
+
+  const input = wrapper.find('input');
+  await input.trigger('focus');
+  expect(wrapper.find('.van-field__clear').html()).toMatchSnapshot();
+});