From e51dd951bb2e324f3d859be9c1e8a074ffe53fca Mon Sep 17 00:00:00 2001 From: bluesky335 Date: Tue, 2 Apr 2024 01:02:37 +0800 Subject: [PATCH 1/3] feat(DatePicker): support "confirm" method, support "getSelectedDate" method --- packages/vant/src/date-picker/DatePicker.tsx | 26 ++++++++++++++++++- packages/vant/src/date-picker/README.md | 26 ++++++++++++++++++- packages/vant/src/date-picker/README.zh-CN.md | 26 ++++++++++++++++++- packages/vant/src/date-picker/index.ts | 2 +- 4 files changed, 76 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index 3444873ea8e..d8b1e947901 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/packages/vant/src/date-picker/DatePicker.tsx @@ -3,6 +3,7 @@ import { watch, computed, defineComponent, + ComponentPublicInstance, type PropType, type ExtractPropTypes, } from 'vue'; @@ -18,7 +19,8 @@ import { } from './utils'; // Components -import { Picker } from '../picker'; +import { Picker, PickerInstance } from '../picker'; +import { useExpose } from '../composables/use-expose'; const currentYear = new Date().getFullYear(); const [name] = createNamespace('date-picker'); @@ -42,8 +44,18 @@ export const datePickerProps = extend({}, sharedProps, { }, }); +export type DatePickerExpose = { + confirm: () => void; + getSelectedDate: () => string[]; +}; + export type DatePickerProps = ExtractPropTypes; +export type DatePickerInstance = ComponentPublicInstance< + DatePickerProps, + DatePickerExpose +>; + export default defineComponent({ name, @@ -54,6 +66,7 @@ export default defineComponent({ setup(props, { emit, slots }) { const currentValues = ref(props.modelValue); const updatedByExternalSources = ref(false); + const pickerRef = ref(); const genYearOptions = () => { const minYear = props.minDate.getFullYear(); @@ -121,6 +134,14 @@ export default defineComponent({ return genOptions(minDate, maxDate, 'day', props.formatter, props.filter); }; + const confirm = () => { + return pickerRef.value?.confirm(); + }; + + const getSelectedDate = (): Array => { + return currentValues.value; + }; + const columns = computed(() => props.columnsType.map((type) => { switch (type) { @@ -169,8 +190,11 @@ export default defineComponent({ const onCancel = (...args: unknown[]) => emit('cancel', ...args); const onConfirm = (...args: unknown[]) => emit('confirm', ...args); + useExpose({ confirm, getSelectedDate }); + return () => ( (); + +datePickerRef.value?.confirm(); ``` diff --git a/packages/vant/src/date-picker/README.zh-CN.md b/packages/vant/src/date-picker/README.zh-CN.md index 22859a506e0..6b5a4668d52 100644 --- a/packages/vant/src/date-picker/README.zh-CN.md +++ b/packages/vant/src/date-picker/README.zh-CN.md @@ -210,12 +210,36 @@ export default { | columns-top | 自定义选项上方内容 | - | | columns-bottom | 自定义选项下方内容 | - | +### 方法 + +通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。 + +| 方法名 | 说明 | 参数 | 返回值 | +| --- | --- | --- | --- | +| confirm | 停止惯性滚动并触发 `confirm` 事件 | - | - | +| getSelectedDate | 获取当前选中的日期 | - | _string[] \| undefined_ | + ### 类型定义 组件导出以下类型定义： ```ts -import type { DatePickerProps, DatePickerColumnType } from 'vant'; +import type { + DatePickerProps, + DatePickerColumnType, + DatePickerInstance, +} from 'vant'; +``` + +`DatePickerInstance` 是组件实例的类型，用法如下： + +```ts +import { ref } from 'vue'; +import type { DatePickerInstance } from 'vant'; + +const datePickerRef = ref(); + +datePickerRef.value?.confirm(); ``` ## 常见问题 diff --git a/packages/vant/src/date-picker/index.ts b/packages/vant/src/date-picker/index.ts index 7358c79e415..c9f24c2a2dc 100644 --- a/packages/vant/src/date-picker/index.ts +++ b/packages/vant/src/date-picker/index.ts @@ -5,7 +5,7 @@ export const DatePicker = withInstall(_DatePicker); export default DatePicker; export { datePickerProps } from './DatePicker'; export type { DatePickerProps }; -export type { DatePickerColumnType } from './DatePicker'; +export type { DatePickerColumnType, DatePickerInstance } from './DatePicker'; declare module 'vue' { export interface GlobalComponents { From 9ca2054275f41861116e334c4e80491d25f683a4 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 4 Apr 2024 15:14:01 +0800 Subject: [PATCH 2/3] Apply suggestions from code review --- packages/vant/src/date-picker/DatePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index d8b1e947901..fbc8d562bbd 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/packages/vant/src/date-picker/DatePicker.tsx @@ -138,7 +138,7 @@ export default defineComponent({ return pickerRef.value?.confirm(); }; - const getSelectedDate = (): Array => { + const getSelectedDate = () => { return currentValues.value; }; From 8509f644fee84f2bab2ae3cfef971a8e2c6ed473 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 4 Apr 2024 15:14:31 +0800 Subject: [PATCH 3/3] Update packages/vant/src/date-picker/DatePicker.tsx --- packages/vant/src/date-picker/DatePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index fbc8d562bbd..9152acb528c 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/packages/vant/src/date-picker/DatePicker.tsx @@ -3,7 +3,7 @@ import { watch, computed, defineComponent, - ComponentPublicInstance, + type ComponentPublicInstance, type PropType, type ExtractPropTypes, } from 'vue';