diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx index 581c77bf5..3d65be4bd 100644 --- a/src/datetime-picker/DatePicker.tsx +++ b/src/datetime-picker/DatePicker.tsx @@ -20,12 +20,10 @@ import { } from '../utils'; import { times, - ColumnType, pickerKeys, sharedProps, getTrueValue, getMonthEndDay, - DatetimePickerType, } from './utils'; // Composables @@ -34,6 +32,9 @@ import { useExpose } from '../composables/use-expose'; // Components import { Picker } from '../picker'; +// Types +import { DatetimePickerColumnType, DatetimePickerType } from './types'; + const currentYear = new Date().getFullYear(); const [name] = createNamespace('date-picker'); @@ -125,7 +126,7 @@ export default defineComponent({ currentDate.value || props.minDate ); - let result: Array<{ type: ColumnType; range: number[] }> = [ + let result: Array<{ type: DatetimePickerColumnType; range: number[] }> = [ { type: 'year', range: [minYear, maxYear], @@ -231,7 +232,7 @@ export default defineComponent({ const { type } = props; const indexes = picker.value!.getIndexes(); - const getValue = (type: ColumnType) => { + const getValue = (type: DatetimePickerColumnType) => { let index = 0; originColumns.value.forEach((column, columnIndex) => { if (type === column.type) { diff --git a/src/datetime-picker/DatetimePicker.tsx b/src/datetime-picker/DatetimePicker.tsx index b1e3e4d55..b235e3c98 100644 --- a/src/datetime-picker/DatetimePicker.tsx +++ b/src/datetime-picker/DatetimePicker.tsx @@ -1,4 +1,4 @@ -import { ref, defineComponent } from 'vue'; +import { ref, defineComponent, ExtractPropTypes } from 'vue'; import { pick, createNamespace, ComponentInstance, extend } from '../utils'; import { useExpose } from '../composables/use-expose'; import TimePicker from './TimePicker'; @@ -8,13 +8,16 @@ const [name, bem] = createNamespace('datetime-picker'); const timePickerProps = Object.keys(TimePicker.props); const datePickerProps = Object.keys(DatePicker.props); +const props = extend({}, TimePicker.props, DatePicker.props, { + modelValue: [String, Date], +}); + +export type DatetimePickerProps = ExtractPropTypes; export default defineComponent({ name, - props: extend({}, TimePicker.props, DatePicker.props, { - modelValue: [String, Date], - }), + props, setup(props, { attrs, slots }) { const root = ref(); diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index d9074e4e6..c833711a0 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -342,3 +342,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dateti | Name | Description | Attribute | Return value | | --------- | ------------------- | --------- | ------------ | | getPicker | get Picker instance | - | - | + +### Types + +Get the type definition of the DatetimePicker instance through `DatetimePickerInstance`. + +```ts +import { ref } from 'vue'; +import type { DatetimePickerInstance } from 'vant'; + +const datetimePickerRef = ref(); + +datetimePickerRef.value?.getPicker(); +``` diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 1c6303c84..567207c73 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -352,6 +352,19 @@ export default { | --- | --- | --- | --- | | getPicker | 获取 Picker 实例,用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - | +### 类型定义 + +通过 `DatetimePickerInstance` 获取 DatetimePicker 实例的类型定义。 + +```ts +import { ref } from 'vue'; +import type { DatetimePickerInstance } from 'vant'; + +const datetimePickerRef = ref(); + +datetimePickerRef.value?.getPicker(); +``` + ## 常见问题 ### 设置 min-date 或 max-date 后出现页面卡死的情况? diff --git a/src/datetime-picker/index.ts b/src/datetime-picker/index.ts index 62339411c..ff032b559 100644 --- a/src/datetime-picker/index.ts +++ b/src/datetime-picker/index.ts @@ -5,4 +5,4 @@ const DatetimePicker = withInstall(_DatetimePicker); export default DatetimePicker; export { DatetimePicker }; -export type { DatetimePickerType } from './utils'; +export type { DatetimePickerType, DatetimePickerInstance } from './types'; diff --git a/src/datetime-picker/types.ts b/src/datetime-picker/types.ts new file mode 100644 index 000000000..039956a2a --- /dev/null +++ b/src/datetime-picker/types.ts @@ -0,0 +1,27 @@ +import { ComponentPublicInstance } from 'vue'; +import type { PickerInstance } from '../picker'; +import { DatetimePickerProps } from './DatetimePicker'; + +export type DatetimePickerColumnType = + | 'year' + | 'month' + | 'day' + | 'hour' + | 'minute'; + +export type DatetimePickerType = + | 'date' + | 'time' + | 'datetime' + | 'datehour' + | 'month-day' + | 'year-month'; + +export type DatetimePickerExpose = { + getPicker: () => PickerInstance; +}; + +export type DatetimePickerInstance = ComponentPublicInstance< + DatetimePickerProps, + DatetimePickerExpose +>; diff --git a/src/datetime-picker/utils.ts b/src/datetime-picker/utils.ts index 408e11003..4eb81ced2 100644 --- a/src/datetime-picker/utils.ts +++ b/src/datetime-picker/utils.ts @@ -1,20 +1,11 @@ import { PropType } from 'vue'; import { extend } from '../utils'; import { pickerProps } from '../picker/Picker'; - -export type ColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute'; - -export type DatetimePickerType = - | 'date' - | 'time' - | 'datetime' - | 'datehour' - | 'month-day' - | 'year-month'; +import type { DatetimePickerColumnType } from './types'; export const sharedProps = extend({}, pickerProps, { filter: Function as PropType<(type: string, values: string[]) => string[]>, - columnsOrder: Array as PropType, + columnsOrder: Array as PropType, formatter: { type: Function as PropType<(type: string, value: string) => string>, default: (type: string, value: string) => value,