feat(Picker): add selectedIndexes to the confirm event (#11329)

packages/vant/src/date-picker/test/index.spec.ts

@@ -26,6 +26,7 @@ test('should emit confirm event correctly', async () => {
         { text: '01', value: '01' },
       ],
       selectedValues: ['2030', '01', '01'],
+      selectedIndexes: [0, 0, 0],
     }
   );
 });
@@ -47,6 +48,7 @@ test('should emit cancel event correctly', async () => {
       { text: '01', value: '01' },
     ],
     selectedValues: ['2030', '01', '01'],
+    selectedIndexes: [0, 0, 0],
   });
 });
 

packages/vant/src/picker/Picker.tsx

@@ -122,6 +122,14 @@ export default defineComponent({
       )
     );
 
+    const selectedIndexes = computed(() =>
+      currentColumns.value.map((options, index) =>
+        options.findIndex(
+          (option) => option[fields.value.value] === selectedValues.value[index]
+        )
+      )
+    );
+
     const setValue = (index: number, value: Numeric) => {
       if (selectedValues.value[index] !== value) {
         const newValues = selectedValues.value.slice(0);
@@ -133,6 +141,7 @@ export default defineComponent({
     const getEventParams = () => ({
       selectedValues: selectedValues.value.slice(0),
       selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value,
     });
 
     const onChange = (value: Numeric, columnIndex: number) => {

packages/vant/src/picker/README.md

@@ -355,10 +355,10 @@ export default {
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| 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 }_ |
+| confirm | Emitted when the confirm button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
+| cancel | Emitted when the cancel button is clicked | _{ selectedValues, selectedOptions, selectedIndexes }_ |
+| change | Emitted when current option is changed | _{ selectedValues, selectedOptions,selectedIndexes, columnIndex }_ |
+| click-option | Emitted when an option is clicked | _{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |
 
 ### Slots
 

packages/vant/src/picker/README.zh-CN.md

@@ -376,10 +376,10 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
-| confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions }_ |
-| cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions }_ |
-| change | 选项改变时触发 | _{ selectedValues, selectedOptions, columnIndex }_ |
-| click-option | 点击选项时触发 | _{ currentOption, selectedValues, selectedOptions, columnIndex }_ |
+| confirm | 点击完成按钮时触发 | _{ selectedValues, selectedOptions, selectedIndexes }_ |
+| cancel | 点击取消按钮时触发 | _{ selectedValues, selectedOptions, selectedIndexes }_ |
+| change | 选项改变时触发 | _{ selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |
+| click-option | 点击选项时触发 | _{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }_ |
 
 ### Slots
 

packages/vant/src/picker/test/index.spec.tsx

@@ -23,6 +23,7 @@ test('should emit confirm event after clicking the confirm button', async () =>
     {
       selectedOptions: [{ text: '1990', value: '1990' }],
       selectedValues: ['1990'],
+      selectedIndexes: [0],
     },
   ]);
 });
@@ -40,6 +41,7 @@ test('should emit cancel event after clicking the cancel button', () => {
     {
       selectedOptions: [{ text: '1990', value: '1990' }],
       selectedValues: ['1990'],
+      selectedIndexes: [0],
     },
   ]);
 });
@@ -60,6 +62,7 @@ test('should emit change event after draging the column', () => {
         columnIndex: 0,
         selectedOptions: [{ text: '1995', value: '1995' }],
         selectedValues: ['1995'],
+        selectedIndexes: [5],
       },
     ],
   ]);
@@ -83,6 +86,7 @@ test('should emit change event when after clicking a option', async () => {
         columnIndex: 0,
         selectedOptions: [{ text: 'B', value: 'B' }],
         selectedValues: ['B'],
+        selectedIndexes: [1],
       },
     ],
   ]);
@@ -134,6 +138,7 @@ test('should emit click-option event after clicking an option', async () => {
       currentOption: { text: '1990', value: '1990' },
       selectedOptions: [{ text: '1990', value: '1990' }],
       selectedValues: ['1990'],
+      selectedIndexes: [0],
     },
   ]);
 });
@@ -180,7 +185,11 @@ test('should allow to update columns props dynamically', async () => {
 
   await wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([
-    { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] },
+    {
+      selectedOptions: [{ text: '2', value: '2' }],
+      selectedValues: ['2'],
+      selectedIndexes: [0],
+    },
   ]);
 });
 
@@ -205,7 +214,11 @@ test('should not reset index when columns unchanged', async () => {
 
   await wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted<[string, number]>('confirm')![0]).toEqual([
-    { selectedOptions: [{ text: '2', value: '2' }], selectedValues: ['2'] },
+    {
+      selectedOptions: [{ text: '2', value: '2' }],
+      selectedValues: ['2'],
+      selectedIndexes: [1],
+    },
   ]);
 });
 

packages/vant/src/picker/types.ts

@@ -47,6 +47,7 @@ export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
 export type PickerConfirmEventParams = {
   selectedValues: Numeric[];
   selectedOptions: Array<PickerOption | undefined>;
+  selectedIndexes: number[];
 };
 
 export type PickerCancelEventParams = PickerConfirmEventParams;

packages/vant/src/time-picker/test/index.spec.tsx

@@ -77,6 +77,7 @@ test('should emit confirm event after clicking the confirm button', async () =>
           { text: '00', value: '00' },
         ],
         selectedValues: ['12', '00'],
+        selectedIndexes: [12, 0],
       },
     ],
   ]);
@@ -105,6 +106,7 @@ test('should emit confirm event correctly after setting values', async () => {
           { text: '00', value: '00' },
         ],
         selectedValues: ['00', '00'],
+        selectedIndexes: [0, 0],
       },
     ],
     [
@@ -114,6 +116,7 @@ test('should emit confirm event correctly after setting values', async () => {
           { text: '30', value: '30' },
         ],
         selectedValues: ['22', '30'],
+        selectedIndexes: [22, 30],
       },
     ],
   ]);
@@ -141,6 +144,7 @@ test('should emit confirm event correctly after setting range', async () => {
           { text: '30', value: '30' },
         ],
         selectedValues: ['20', '30'],
+        selectedIndexes: [0, 0],
       },
     ],
   ]);
@@ -167,6 +171,7 @@ test('should emit confirm event correctly after setting smaller max-hour and max
           { text: '00', value: '00' },
         ],
         selectedValues: ['00', '00'],
+        selectedIndexes: [0, 0],
       },
     ],
   ]);