blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/field/README.md
View File

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

14
src/field/README.zh-CN.md
View File

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

12
src/field/index.js
View File

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

7
src/field/test/index.spec.js
View File

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