blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-25 07:49:15 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): add click-input event (#6239)

Browse Source
This commit is contained in:
chenjiahan 2020-05-08 20:15:32 +08:00
parent f344334e12
commit a7968c5f6e
4 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/field/README.md
View File

@ -253,6 +253,7 @@ Field support all native events of input tag
| blur | Triggered when input loses focus | _event: Event_ |
| clear | Triggered when click clear icon | _event: Event_ |
| click | Triggered when click Field | _event: Event_ |
| click-input `v2.8.1` | Triggered when click input | _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_ |

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

@ -271,15 +271,16 @@ export default {
除下列事件外，Field 默认支持 Input 标签所有的原生事件
| 事件 | 说明 | 回调参数 |
| ---------------- | -------------------- | ------------------------------ |
| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | _event: Event_ |
| clear | 点击清除按钮时触发 | _event: Event_ |
| click | 点击时触发 | _event: Event_ |
| click-left-icon | 点击左侧图标时触发 | _event: Event_ |
| click-right-icon | 点击右侧图标时触发 | _event: Event_ |
| 事件 | 说明 | 回调参数 |
| -------------------- | -------------------- | ------------------------------ |
| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | _event: Event_ |
| clear | 点击清除按钮时触发 | _event: Event_ |
| click | 点击 Field 时触发 | _event: Event_ |
| click-input `v2.8.1` | 点击输入区域时触发 | _event: Event_ |
| click-left-icon | 点击左侧图标时触发 | _event: Event_ |
| click-right-icon | 点击右侧图标时触发 | _event: Event_ |
### 方法

24
src/field/index.js
View File

@ -113,17 +113,14 @@ export default createComponent({
},
listeners() {
const listeners = {
return {
...this.$listeners,
input: this.onInput,
keypress: this.onKeypress,
focus: this.onFocus,
blur: this.onBlur,
focus: this.onFocus,
input: this.onInput,
click: this.onClickInput,
keypress: this.onKeypress,
};
delete listeners.click;
return listeners;
},
labelStyle() {
@ -337,6 +334,10 @@ export default createComponent({
this.$emit('click', event);
},
onClickInput(event) {
this.$emit('click-input', event);
},
onClickLeftIcon(event) {
this.$emit('click-left-icon', event);
},
@ -392,7 +393,12 @@ export default createComponent({
if (inputSlot) {
return (
<div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
<div
class={bem('control', [inputAlign, 'custom'])}
onClick={this.onClickInput}
>
{inputSlot}
</div>
);
}

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

@ -17,7 +17,25 @@ test('click event', () => {
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
});
test('click icon event', () => {
test('click-input event', () => {
const wrapper = mount(Field);
wrapper.find('input').trigger('click');
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
});
test('click-input event when using input slot', () => {
const wrapper = mount(Field, {
scopedSlots: {
input: () => 'Custom Input',
},
});
wrapper.find('.van-field__control').trigger('click');
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
});
test('click-icon event', () => {
const wrapper = mount(Field, {
propsData: {
value: 'a',