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({
{renderInput()}
{showClear.value && (
-
+
)}
{renderRightIcon()}
{slots.button &&
{slots.button()}
}
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,
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 有效,
可传入对象,如 { maxHeight: 100, minHeight: 50 },
单位为`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`] = `
+
+
+`;
+
exports[`should render colon when using colon prop 1`] = `
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();
+});