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

feat(Search): add click-left-icon、click-right-icon event (#10139)

Browse Source
This commit is contained in:
neverland 2022-01-01 09:44:54 +08:00 committed by GitHub
parent 2b3c1baa0b
commit b2bf45b0d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/search/README.md
View File

@ -170,6 +170,8 @@ export default {
| focus | Emitted when input is focused | _event: Event_ |
| blur | Emitted when input is blurred | _event: Event_ |
| click-input | Emitted when the input is clicked | _event: MouseEvent_ |
| click-left-icon `v3.4.0` | Emitted when the left icon is clicked | _event: MouseEvent_ |
| click-right-icon `v3.4.0` | Emitted when the right icon is clicked | _event: MouseEvent_ |
| clear | Emitted when the clear icon is clicked | _event: MouseEvent_ |
| cancel | Emitted when the cancel button is clicked | - |

18
packages/vant/src/search/README.zh-CN.md
View File

@ -175,15 +175,17 @@ export default {
### Events
| 事件名 | 说明 | 回调参数 |
| ------------------ | -------------------- | ------------------------------ |
| search | 确定搜索时触发 | _value: string (当前输入的值)_ |
| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| search | 确定搜索时触发 | _value: string (当前输入的值)_ |
| update:model-value | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
| focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | _event: Event_ |
| click-input | 点击输入区域时触发 | _event: MouseEvent_ |
| clear | 点击清除按钮后触发 | _event: MouseEvent_ |
| cancel | 点击取消按钮时触发 | - |
| focus | 输入框获得焦点时触发 | _event: Event_ |
| blur | 输入框失去焦点时触发 | _event: Event_ |
| click-input | 点击输入区域时触发 | _event: MouseEvent_ |
| click-left-icon `v3.4.0` | 点击左侧图标时触发 | _event: MouseEvent_ |
| click-right-icon `3.4.0` | 点击右侧图标时触发 | _event: MouseEvent_ |
| clear | 点击清除按钮后触发 | _event: MouseEvent_ |
| cancel | 点击取消按钮时触发 | - |
### 方法

8
packages/vant/src/search/Search.tsx
View File

@ -47,6 +47,8 @@ export default defineComponent({
'search',
'cancel',
'click-input',
'click-left-icon',
'click-right-icon',
'update:modelValue',
],
@ -103,6 +105,10 @@ export default defineComponent({
const onFocus = (event: Event) => emit('focus', event);
const onClear = (event: MouseEvent) => emit('clear', event);
const onClickInput = (event: MouseEvent) => emit('click-input', event);
const onClickLeftIcon = (event: MouseEvent) =>
emit('click-left-icon', event);
const onClickRightIcon = (event: MouseEvent) =>
emit('click-right-icon', event);
const fieldPropNames = Object.keys(fieldSharedProps) as Array<
keyof typeof fieldSharedProps
@ -127,6 +133,8 @@ export default defineComponent({
onClear={onClear}
onKeypress={onKeypress}
onClick-input={onClickInput}
onClick-left-icon={onClickLeftIcon}
onClick-right-icon={onClickRightIcon}
onUpdate:modelValue={onInput}
{...fieldAttrs}
/>

22
packages/vant/src/search/test/index.spec.ts
View File

@ -170,3 +170,25 @@ test('should render input name when using name prop', () => {
});
expect(wrapper.find('input').element.getAttribute('name')).toEqual('foo');
});
test('should emit click-left-icon event after clicking the left icon', async () => {
const wrapper = mount(Search, {
props: {
leftIcon: 'foo',
},
});
await wrapper.find('.van-field__left-icon').trigger('click');
expect(wrapper.emitted('click-left-icon')).toHaveLength(1);
});
test('should emit click-right-icon event after clicking the right icon', async () => {
const wrapper = mount(Search, {
props: {
rightIcon: 'foo',
},
});
await wrapper.find('.van-field__right-icon').trigger('click');
expect(wrapper.emitted('click-right-icon')).toHaveLength(1);
});