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

youzan · Jan 1, 2022 · b2bf45b · b2bf45b
1 parent 2b3c1ba
commit b2bf45b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md
@@ -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 | - |
 

diff --git a/packages/vant/src/search/README.zh-CN.md b/packages/vant/src/search/README.zh-CN.md
@@ -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 | 点击取消按钮时触发 | - |
 
 ### 方法
 

diff --git a/packages/vant/src/search/Search.tsx b/packages/vant/src/search/Search.tsx
@@ -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}
         />

diff --git a/packages/vant/src/search/test/index.spec.ts b/packages/vant/src/search/test/index.spec.ts
@@ -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);
+});