From ddd2c845c332dd46849b2f3f1456ef49d0d1f5f5 Mon Sep 17 00:00:00 2001 From: bluesky335 Date: Tue, 2 Apr 2024 01:03:53 +0800 Subject: [PATCH 1/2] feat(PickerGroup): support "confirm" method, support "showToolbar" props --- .../vant/src/picker-group/PickerGroup.tsx | 65 +++++++++++++++---- packages/vant/src/picker-group/README.md | 31 ++++++++- .../vant/src/picker-group/README.zh-CN.md | 31 ++++++++- packages/vant/src/picker-group/index.ts | 2 +- packages/vant/src/utils/props.ts | 5 ++ 5 files changed, 117 insertions(+), 17 deletions(-) diff --git a/packages/vant/src/picker-group/PickerGroup.tsx b/packages/vant/src/picker-group/PickerGroup.tsx index efead8dc466..9da9676366a 100644 --- a/packages/vant/src/picker-group/PickerGroup.tsx +++ b/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(), 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; +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({ confirm: doConfirm }); + return () => { let childNodes = slots .default?.() @@ -98,16 +127,24 @@ export default defineComponent({ ? props.nextStepText : props.confirmButtonText; + const renderToolbar = () => { + if (props.showToolbar) { + return ( + + ); + } + }; + return (
- + {renderToolbar()} (); + +datePickerRef.value?.confirm(); ``` ## Theming diff --git a/packages/vant/src/picker-group/README.zh-CN.md b/packages/vant/src/picker-group/README.zh-CN.md index 234bfd4ba6d..332f9eb83e6 100644 --- a/packages/vant/src/picker-group/README.zh-CN.md +++ b/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(); + +pickerGroupRef.value?.confirm(); ``` ## 主题定制 diff --git a/packages/vant/src/picker-group/index.ts b/packages/vant/src/picker-group/index.ts index 6cb51df5d5b..dd5639a22a3 100644 --- a/packages/vant/src/picker-group/index.ts +++ b/packages/vant/src/picker-group/index.ts @@ -3,7 +3,7 @@ import _PickerGroup, { PickerGroupProps } from './PickerGroup'; export const PickerGroup = withInstall(_PickerGroup); export default PickerGroup; -export { pickerGroupProps } from './PickerGroup'; +export { pickerGroupProps, PickerGroupInstance } from './PickerGroup'; export type { PickerGroupProps }; export type { PickerGroupThemeVars } from './types'; diff --git a/packages/vant/src/utils/props.ts b/packages/vant/src/utils/props.ts index acc2cf193df..24ad497d685 100644 --- a/packages/vant/src/utils/props.ts +++ b/packages/vant/src/utils/props.ts @@ -37,3 +37,8 @@ export const makeStringProp = (defaultVal: T) => ({ type: String as unknown as PropType, default: defaultVal, }); + +export const makeBooleanProp = (defaultVal: T) => ({ + type: Boolean, + default: defaultVal, +}); From 4b4be102b035f840fe15df1ae9af49af45f197ca Mon Sep 17 00:00:00 2001 From: bluesky335 Date: Tue, 2 Apr 2024 01:53:57 +0800 Subject: [PATCH 2/2] feat(PickerGroup): support "confirm" method, support "showToolbar" props --- packages/vant/src/picker-group/index.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/vant/src/picker-group/index.ts b/packages/vant/src/picker-group/index.ts index dd5639a22a3..3b706d051ee 100644 --- a/packages/vant/src/picker-group/index.ts +++ b/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, PickerGroupInstance } from './PickerGroup'; -export type { PickerGroupProps }; +export { pickerGroupProps } from './PickerGroup'; +export type { PickerGroupProps, PickerGroupInstance }; export type { PickerGroupThemeVars } from './types'; declare module 'vue' {