From a7968c5f6ee840bd21f38724360e0e0d4d80685d Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 8 May 2020 20:15:32 +0800 Subject: [PATCH] feat(Field): add click-input event (#6239) --- src/field/README.md | 1 + src/field/README.zh-CN.md | 19 ++++++++++--------- src/field/index.js | 24 +++++++++++++++--------- src/field/test/index.spec.js | 20 +++++++++++++++++++- 4 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/field/README.md b/src/field/README.md index c8a063cc8..736452319 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -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_ | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 932930906..332792d7e 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -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_ | ### 方法 diff --git a/src/field/index.js b/src/field/index.js index 81d01eb12..fff3e72ba 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -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 ( -
{inputSlot}
+
+ {inputSlot} +
); } diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js index 48218eb8b..4a3280fd4 100644 --- a/src/field/test/index.spec.js +++ b/src/field/test/index.spec.js @@ -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',