feat(PickerGroup): support "confirm" method, support "showToolbar" props

packages/vant/src/picker-group/PickerGroup.tsx

@@ -5,6 +5,8 @@ import {
   type InjectionKey,
   type ExtractPropTypes,
   type VNode,
+  ComponentPublicInstance,
+  nextTick,
 } from 'vue';
 
 // Utils
@@ -15,6 +17,7 @@ import {
   makeArrayProp,
   makeNumericProp,
   createNamespace,
+  makeBooleanProp,
 } from '../utils';
 
 // Composables
@@ -28,6 +31,7 @@ import Toolbar, {
   pickerToolbarProps,
   pickerToolbarSlots,
 } from '../picker/PickerToolbar';
+import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('picker-group');
 
@@ -40,12 +44,26 @@ export const pickerGroupProps = extend(
     tabs: makeArrayProp<string>(),
     activeTab: makeNumericProp(0),
     nextStepText: String,
+    showToolbar: makeBooleanProp(true),
   },
   pickerToolbarProps,
 );
 
+export type PickerGroupConfirmOptions = {
+  nextFirst?: boolean;
+};
+
+export type PickerGroupExpose = {
+  confirm: (options?: PickerGroupConfirmOptions) => void;
+};
+
 export type PickerGroupProps = ExtractPropTypes<typeof pickerGroupProps>;
 
+export type PickerGroupInstance = ComponentPublicInstance<
+  PickerGroupProps,
+  PickerGroupExpose
+>;
+
 export default defineComponent({
   name,
 
@@ -62,22 +80,33 @@ export default defineComponent({
 
     linkChildren();
 
-    const showNextButton = () =>
-      +activeTab.value < props.tabs.length - 1 && props.nextStepText;
+    const canNext = () => +activeTab.value < props.tabs.length - 1;
+
+    const showNextButton = () => canNext() && props.nextStepText;
 
     const onConfirm = () => {
       if (showNextButton()) {
         activeTab.value = +activeTab.value + 1;
       } else {
-        emit(
-          'confirm',
-          children.map((item) => item.confirm()),
-        );
+        const selectedData = children.map((item) => item.confirm());
+        nextTick(() => emit('confirm', selectedData));
       }
     };
 
     const onCancel = () => emit('cancel');
 
+    const doConfirm = (options?: PickerGroupConfirmOptions) => {
+      if (options?.nextFirst && canNext()) {
+        activeTab.value = +activeTab.value + 1;
+      } else {
+        const selectedData = children.map((item) => item.confirm());
+        nextTick(() => emit('confirm', selectedData));
+        return selectedData;
+      }
+    };
+
+    useExpose<PickerGroupExpose>({ confirm: doConfirm });
+
     return () => {
       let childNodes = slots
         .default?.()
@@ -98,16 +127,24 @@ export default defineComponent({
         ? props.nextStepText
         : props.confirmButtonText;
 
+      const renderToolbar = () => {
+        if (props.showToolbar) {
+          return (
+            <Toolbar
+              v-slots={pick(slots, pickerToolbarSlots)}
+              title={props.title}
+              cancelButtonText={props.cancelButtonText}
+              confirmButtonText={confirmButtonText}
+              onConfirm={onConfirm}
+              onCancel={onCancel}
+            />
+          );
+        }
+      };
+
       return (
         <div class={bem()}>
-          <Toolbar
-            v-slots={pick(slots, pickerToolbarSlots)}
-            title={props.title}
-            cancelButtonText={props.cancelButtonText}
-            confirmButtonText={confirmButtonText}
-            onConfirm={onConfirm}
-            onCancel={onCancel}
-          />
+          {renderToolbar()}
           <Tabs
             v-model:active={activeTab.value}
             class={bem('tabs')}

packages/vant/src/picker-group/README.md

@@ -309,12 +309,41 @@ export default {
 | confirm | Custom confirm button text | -         |
 | cancel  | Custom cancel button text  | -         |
 
+### Data Structure of PickerGroupConfirmOptions
+
+| Key | Description | Type |
+| --- | --- | --- |
+| nextFirst | If true, move to the next tab if current is not the last tab; otherwise, execute `confirm`. | _boolean ｜ undefined_ |
+
+### Methods
+
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Picker instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| confirm | Stop scrolling and emit confirm event | _option?: PickerGroupConfirmOptions_ | - |
+
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { PickerGroupProps, PickerGroupThemeVars } from 'vant';
+import type {
+  PickerGroupProps,
+  PickerGroupThemeVars,
+  PickerGrouInstance,
+} from 'vant';
+```
+
+`PickerGrouInstance` is the type of component instance:
+
+```ts
+import { ref } from 'vue';
+import type { PickerGrouInstance } from 'vant';
+
+const pickerGrouRef = ref<PickerGrouInstance>();
+
+datePickerRef.value?.confirm();
 ```
 
 ## Theming

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

@@ -310,12 +310,41 @@ export default {
 | confirm | 自定义确认按钮内容     | -    |
 | cancel  | 自定义取消按钮内容     | -    |
 
+### PickerGroupConfirmOptions 数据结构
+
+| Key | Description | Type |
+| --- | --- | --- |
+| nextFirst | 如果为 true 且当前不是最后一个 tab 则移动到下一个 tab，否则执行 `confirm`. | _boolean ｜ undefined_ |
+
+### 方法
+
+通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| confirm | 停止惯性滚动并触发 `confirm` 事件 | _options?: PickerGroupConfirmOptions_ | - |
+
 ### 类型定义
 
 组件导出以下类型定义：
 
 ```ts
-import type { PickerGroupProps, PickerGroupThemeVars } from 'vant';
+import type {
+  PickerGroupProps,
+  PickerGroupThemeVars,
+  PickerGroupInstance,
+} from 'vant';
+```
+
+`PickerGroupInstance` 是组件实例的类型，用法如下：
+
+```ts
+import { ref } from 'vue';
+import type { PickerGroupInstance } from 'vant';
+
+const pickerGroupRef = ref<PickerGroupInstance>();
+
+pickerGroupRef.value?.confirm();
 ```
 
 ## 主题定制

packages/vant/src/picker-group/index.ts

@@ -1,10 +1,13 @@
 import { withInstall } from '../utils';
-import _PickerGroup, { PickerGroupProps } from './PickerGroup';
+import _PickerGroup, {
+  PickerGroupProps,
+  PickerGroupInstance,
+} from './PickerGroup';
 
 export const PickerGroup = withInstall(_PickerGroup);
 export default PickerGroup;
 export { pickerGroupProps } from './PickerGroup';
-export type { PickerGroupProps };
+export type { PickerGroupProps, PickerGroupInstance };
 export type { PickerGroupThemeVars } from './types';
 
 declare module 'vue' {

packages/vant/src/utils/props.ts

@@ -37,3 +37,8 @@ export const makeStringProp = <T>(defaultVal: T) => ({
   type: String as unknown as PropType<T>,
   default: defaultVal,
 });
+
+export const makeBooleanProp = <T>(defaultVal: T) => ({
+  type: Boolean,
+  default: defaultVal,
+});