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 | 点击清除按钮后触发 | - | ### 方法