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`] = `
+
+
+
+
+ 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: {