[bugfix] Field: shouldn't emit click event when click icon (#3772)

This commit is contained in:
neverland 2019-07-08 11:14:53 +08:00 committed by GitHub
parent 8871dec4e7
commit 642639da6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 20 deletions

View File

@ -148,15 +148,17 @@ Field support all native properties of input tagsuch as `maxlength`、`placeh
### Events
Field support all native events of input tagsuch as `focus``blur``keypress`
Field support all native events of input tag
| Event | Description | Parameters |
|------|------|------|
| input | Triggered when value changed | - |
| click | Triggered when click field | - |
| clear | Triggered when click clear icon | - |
| click-left-icon | Triggered when click the left icon of Field | - |
| click-right-icon | Triggered when click the right icon of Field | - |
| input | Triggered when input value changed | value: current value |
| focus | Triggered when input gets focus | event: Event |
| blur | Triggered when input loses focus | event: Event |
| clear | Triggered when click clear icon | event: Event |
| click | Triggered when click Field | event: Event |
| click-left-icon | Triggered when click the left icon of Field | event: Event |
| click-right-icon | Triggered when click the right icon of Field | event: Event |
### Methods

View File

@ -151,15 +151,17 @@ Field 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pla
### Events
Field 默认支持 Input 标签所有的原生事件,如 `focus``blur``keypress`
除下列事件外,Field 默认支持 Input 标签所有的原生事件
| 事件 | 说明 | 回调参数 |
|------|------|------|
| input | 输入框内容变化时触发 | - |
| click | 点击时触发 | - |
| clear | 点击清除按钮后触发 | - |
| click-left-icon | 点击头部图标时触发 | - |
| click-right-icon | 点击尾部图标时触发 | - |
| input | 输入框内容变化时触发 | value: 输入框当前值 |
| focus | 输入框获得焦点时触发 | event: Event |
| blur | 输入框失去焦点时触发 | event: Event |
| clear | 点击清除按钮时触发 | event: Event |
| click | 点击时触发 | event: Event |
| click-left-icon | 点击左侧图标时触发 | event: Event |
| click-right-icon | 点击右侧图标时触发 | event: Event |
### 方法

View File

@ -147,18 +147,20 @@ export default createComponent({
this.$emit('click', event);
},
onClickLeftIcon() {
this.$emit('click-left-icon');
onClickLeftIcon(event) {
event.stopPropagation();
this.$emit('click-left-icon', event);
},
onClickRightIcon() {
this.$emit('click-right-icon');
onClickRightIcon(event) {
event.stopPropagation();
this.$emit('click-right-icon', event);
},
onClear(event) {
preventDefault(event);
this.$emit('input', '');
this.$emit('clear');
this.$emit('clear', event);
},
onKeypress(event) {

View File

@ -28,8 +28,9 @@ test('click icon event', () => {
wrapper.find('.van-field__left-icon').trigger('click');
wrapper.find('.van-field__right-icon').trigger('click');
expect(wrapper.emitted('click-left-icon')).toBeTruthy();
expect(wrapper.emitted('click-right-icon')).toBeTruthy();
expect(wrapper.emitted('click')).toBeFalsy();
expect(wrapper.emitted('click-left-icon')[0][0]).toBeTruthy();
expect(wrapper.emitted('click-right-icon')[0][0]).toBeTruthy();
});
test('keypress event', () => {
@ -164,7 +165,7 @@ test('clearable', () => {
wrapper.find('.van-field__clear').trigger('touchstart');
expect(wrapper.emitted('input')[0][0]).toEqual('');
expect(wrapper.emitted('clear')).toBeTruthy();
expect(wrapper.emitted('clear')[0][0]).toBeTruthy();
});
test('render input slot', () => {