From 2f6ef7aed82305e9e47995a81370578dfffbd365 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 30 Jul 2022 14:04:43 +0800
Subject: [PATCH] feat(Picker): add clickOption event (#10865)

* feat(Picker): add clickOption event

* chore: update
---
 .../icon/test/__snapshots__/demo.spec.ts.snap |  4 ++++
 packages/vant/src/picker/Picker.tsx           | 13 ++++++++++++-
 packages/vant/src/picker/PickerColumn.tsx     |  7 ++++---
 packages/vant/src/picker/README.md            |  1 +
 packages/vant/src/picker/README.zh-CN.md      |  1 +
 packages/vant/src/picker/test/index.spec.tsx  | 19 +++++++++++++++++++
 6 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
index db4d7d864..af32bbb56 100644
--- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
@@ -75,6 +75,10 @@ exports[`should render demo and match snapshot 1`] = `
             <i class="van-badge__wrapper van-icon van-icon-chat-o">
             </i>
           </div>
+        </div>
+      </div>
+      <div>
+        <div class="van-row">
           <div class="van-col van-col--6">
             <i class="van-badge__wrapper van-icon">
               <img class="van-icon__image"
diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx
index 7606e2c25..978ed4144 100644
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@@ -77,7 +77,7 @@ export default defineComponent({
 
   props: pickerProps,
 
-  emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
+  emits: ['confirm', 'cancel', 'change', 'clickOption', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
     const selectedValues = ref(props.modelValue);
@@ -144,6 +144,14 @@ export default defineComponent({
       });
     };
 
+    const onClickOption = (currentOption: PickerOption, columnIndex: number) =>
+      emit('clickOption', {
+        columnIndex,
+        currentOption,
+        selectedValues: selectedValues.value,
+        selectedOptions: selectedOptions.value,
+      });
+
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
       emit('confirm', {
@@ -218,6 +226,9 @@ export default defineComponent({
           swipeDuration={props.swipeDuration}
           visibleOptionNum={props.visibleOptionNum}
           onChange={(value: Numeric) => onChange(value, columnIndex)}
+          onClickOption={(option: PickerOption) =>
+            onClickOption(option, columnIndex)
+          }
         />
       ));
 
diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx
index 0e53429b0..8a7b209b5 100644
--- a/packages/vant/src/picker/PickerColumn.tsx
+++ b/packages/vant/src/picker/PickerColumn.tsx
@@ -56,7 +56,7 @@ export default defineComponent({
     visibleOptionNum: makeRequiredProp(numericProp),
   },
 
-  emits: ['change'],
+  emits: ['change', 'clickOption'],
 
   setup(props, { emit, slots }) {
     let moving: boolean;
@@ -96,7 +96,7 @@ export default defineComponent({
       currentOffset.value = offset;
     };
 
-    const onClickItem = (index: number) => {
+    const onClickOption = (index: number) => {
       if (moving || props.readonly) {
         return;
       }
@@ -104,6 +104,7 @@ export default defineComponent({
       transitionEndTrigger = null;
       currentDuration.value = DEFAULT_DURATION;
       updateValueByIndex(index);
+      emit('clickOption', props.options[index]);
     };
 
     const getIndexByOffset = (offset: number) =>
@@ -221,7 +222,7 @@ export default defineComponent({
             }),
             option.className,
           ],
-          onClick: () => onClickItem(index),
+          onClick: () => onClickOption(index),
         };
 
         const childData = {
diff --git a/packages/vant/src/picker/README.md b/packages/vant/src/picker/README.md
index 799c10936..839b501fa 100644
--- a/packages/vant/src/picker/README.md
+++ b/packages/vant/src/picker/README.md
@@ -358,6 +358,7 @@ export default {
 | confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions }_ |
 | cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions }_ |
 | change | Emitted when current option is changed | _{ selectedValues, selectedOptions, columnIndex }_ |
+| click-option | Emitted when an option is clicked | _{ currentOption, selectedValues, selectedOptions, columnIndex }_ |
 
 ### Slots
 
diff --git a/packages/vant/src/picker/README.zh-CN.md b/packages/vant/src/picker/README.zh-CN.md
index 8bd209a4f..1cab78f55 100644
--- a/packages/vant/src/picker/README.zh-CN.md
+++ b/packages/vant/src/picker/README.zh-CN.md
@@ -379,6 +379,7 @@ export default {
 | confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions }_ |
 | cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions }_ |
 | change | 选项改变时触发 | _{ selectedValues, selectedOptions, columnIndex }_ |
+| click-option | 点击选项时触发 | _{ currentOption, selectedValues, selectedOptions, columnIndex }_ |
 
 ### Slots
 
diff --git a/packages/vant/src/picker/test/index.spec.tsx b/packages/vant/src/picker/test/index.spec.tsx
index 9eb5a67d2..b36ad40a4 100644
--- a/packages/vant/src/picker/test/index.spec.tsx
+++ b/packages/vant/src/picker/test/index.spec.tsx
@@ -119,6 +119,25 @@ test('should not emit change event when after clicking a disabled option', async
   expect(wrapper.emitted<[string, number]>('change')).toBeFalsy();
 });
 
+test('should emit click-option event after clicking an option', async () => {
+  const wrapper = mount(Picker, {
+    props: {
+      showToolbar: true,
+      columns: simpleColumn,
+    },
+  });
+
+  await wrapper.find('.van-picker-column__item').trigger('click');
+  expect(wrapper.emitted('clickOption')![0]).toEqual([
+    {
+      columnIndex: 0,
+      currentOption: { text: '1990', value: '1990' },
+      selectedOptions: [{ text: '1990', value: '1990' }],
+      selectedValues: ['1990'],
+    },
+  ]);
+});
+
 test('should render bottom toolbar when toolbar-position is bottom', () => {
   const wrapper = mount(Picker, {
     props: {