From b2bf45b0d193018124cd1b4fd7ac8d8f7a1c9e14 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 1 Jan 2022 09:44:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(Search):=20add=20click-left-icon=E3=80=81c?=
 =?UTF-8?q?lick-right-icon=20event=20(#10139)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vant/src/search/README.md          |  2 ++
 packages/vant/src/search/README.zh-CN.md    | 18 +++++++++--------
 packages/vant/src/search/Search.tsx         |  8 ++++++++
 packages/vant/src/search/test/index.spec.ts | 22 +++++++++++++++++++++
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/vant/src/search/README.md b/packages/vant/src/search/README.md
index a03a5fc0a..f228ad357 100644
--- 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
index 9d70a0d38..0da971f2a 100644
--- 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
index b993cb01d..b451e3bf7 100644
--- 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
index f8c5d9474..b9f43e89a 100644
--- 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);
+});