diff --git a/packages/field/en-US.md b/packages/field/en-US.md
index 27644a288..417d9cf48 100644
--- a/packages/field/en-US.md
+++ b/packages/field/en-US.md
@@ -139,6 +139,7 @@ Field support all native events of input tag,such as `focus`、`blur`、`keypr
| Event | Description | Parameters |
|-----------|-----------|-----------|
| click-icon | Triggered when click the icon of Field | - |
+| clear | Triggered when click clear icon | - |
### Methods
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 7a07797d4..ac9684573 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -38,7 +38,7 @@
v-if="showClear"
name="clear"
:class="b('clear')"
- @touchstart.prevent="$emit('input', '')"
+ @touchstart.prevent="onClear"
/>
@@ -152,6 +152,7 @@ export default create({
this.$emit('focus', event);
// hack for safari
+ /* istanbul ignore if */
if (this.readonly) {
this.blur();
}
@@ -167,6 +168,11 @@ export default create({
this.onIconClick && this.onIconClick();
},
+ onClear() {
+ this.$emit('input', '');
+ this.$emit('clear');
+ },
+
onKeypress(event) {
if (this.type === 'number') {
const { keyCode } = event;
@@ -177,6 +183,8 @@ export default create({
}
}
+ // trigger blur after click keyboard search button
+ /* istanbul ignore next */
if (this.type === 'search' && event.keyCode === 13) {
this.blur();
}
diff --git a/packages/field/test/__snapshots__/index.spec.js.snap b/packages/field/test/__snapshots__/index.spec.js.snap
index 203fdc2de..d1ce94da0 100644
--- a/packages/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/field/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,41 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`clearable 1`] = `
+
+`;
+
+exports[`clearable 2`] = `
+
+`;
+
exports[`render textarea 1`] = `
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js
index 6bb694871..9482e91e3 100644
--- a/packages/field/test/index.spec.js
+++ b/packages/field/test/index.spec.js
@@ -131,3 +131,21 @@ test('maxlength', async() => {
expect(input.element.value).toEqual('123');
expect(wrapper.emitted('input')[0][0]).toEqual('123');
});
+
+test('clearable', () => {
+ const wrapper = mount(Field, {
+ propsData: {
+ value: 'test',
+ clearable: true
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+ const input = wrapper.find('input');
+ input.trigger('focus');
+ expect(wrapper).toMatchSnapshot();
+
+ wrapper.find('.van-field__clear').trigger('touchstart');
+ expect(wrapper.emitted('input')[0][0]).toEqual('');
+ expect(wrapper.emitted('clear')).toBeTruthy();
+});
diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md
index e4c2e8c21..d797ae65c 100644
--- a/packages/field/zh-CN.md
+++ b/packages/field/zh-CN.md
@@ -141,6 +141,7 @@ Field 默认支持 Input 标签所有的原生事件,如 `focus`、`blur`、`k
| 事件 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| click-icon | 点击尾部图标时触发 | - |
+| clear | 点击清除按钮后触发 | - |
### 方法