From 6b16057d3005471f604887d01773025aa15fdef1 Mon Sep 17 00:00:00 2001
From: CoderX <chinabluesky335@gmail.com>
Date: Thu, 4 Apr 2024 10:34:32 +0800
Subject: [PATCH] feat(TimePicker): support confirm and getSelectedTime methods
 (#12761)

Co-authored-by: neverland <jait.chen@foxmail.com>
---
 packages/vant/src/time-picker/README.md       | 26 ++++++++++++++++-
 packages/vant/src/time-picker/README.zh-CN.md | 20 +++++++++++++
 packages/vant/src/time-picker/TimePicker.tsx  | 28 ++++++++++++++++++-
 packages/vant/src/time-picker/index.ts        |  2 +-
 4 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md
index a7922074a..79bbc93c0 100644
--- a/packages/vant/src/time-picker/README.md
+++ b/packages/vant/src/time-picker/README.md
@@ -283,10 +283,34 @@ export default {
 | columns-top | Custom content above columns | - |
 | columns-bottom | Custom content below columns | - |
 
+### 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 | - | - |
+| getSelectedTime | Get current selected time | - | _string[] \| undefined_ |
+
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { TimePickerProps, TimePickerColumnType } from 'vant';
+import type {
+  TimePickerProps,
+  TimePickerColumnType,
+  TimePickerInstance,
+} from 'vant';
+```
+
+`TimePickerInstance` is the type of component instance:
+
+```ts
+import { ref } from 'vue';
+import type { TimePickerInstance } from 'vant';
+
+const timePickerRef = ref<TimePickerInstance>();
+
+timePickerRef.value?.confirm();
 ```
diff --git a/packages/vant/src/time-picker/README.zh-CN.md b/packages/vant/src/time-picker/README.zh-CN.md
index 2f5edafdc..21f885845 100644
--- a/packages/vant/src/time-picker/README.zh-CN.md
+++ b/packages/vant/src/time-picker/README.zh-CN.md
@@ -284,6 +284,15 @@ export default {
 | columns-top | 自定义选项上方内容 | - |
 | columns-bottom | 自定义选项下方内容 | - |
 
+### 方法
+
+通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| confirm | 停止惯性滚动并触发 `confirm` 事件 | - | - |
+| getSelectedTime | 获取当前选中的时间 | - | _string[] \| undefined_ |
+
 ### 类型定义
 
 组件导出以下类型定义：
@@ -292,6 +301,17 @@ export default {
 import type { TimePickerProps, TimePickerColumnType } from 'vant';
 ```
 
+`TimePickerInstance` 是组件实例的类型，用法如下：
+
+```ts
+import { ref } from 'vue';
+import type { TimePickerInstance } from 'vant';
+
+const timePickerRef = ref<TimePickerInstance>();
+
+timePickerRef.value?.confirm();
+```
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？
diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx
index f964a5e75..5075ff717 100644
--- a/packages/vant/src/time-picker/TimePicker.tsx
+++ b/packages/vant/src/time-picker/TimePicker.tsx
@@ -5,6 +5,7 @@ import {
   watch,
   type ExtractPropTypes,
   type PropType,
+  type ComponentPublicInstance,
 } from 'vue';
 
 // Utils
@@ -24,7 +25,10 @@ import {
 } from '../utils';
 
 // Components
-import { Picker } from '../picker';
+import { Picker, PickerInstance } from '../picker';
+
+// Composables
+import { useExpose } from '../composables/use-expose';
 
 const [name] = createNamespace('time-picker');
 
@@ -58,6 +62,16 @@ export const timePickerProps = extend({}, sharedProps, {
 
 export type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
 
+export type TimePickerExpose = {
+  confirm: () => void;
+  getSelectedTime: () => string[];
+};
+
+export type TimePickerInstance = ComponentPublicInstance<
+  TimePickerProps,
+  TimePickerExpose
+>;
+
 export default defineComponent({
   name,
 
@@ -67,6 +81,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const currentValues = ref<string[]>(props.modelValue);
+    const pickerRef = ref<PickerInstance>();
 
     const getValidTime = (time: string) => {
       const timeLimitArr = time.split(':');
@@ -75,6 +90,14 @@ export default defineComponent({
       );
     };
 
+    const confirm = () => {
+      return pickerRef.value?.confirm();
+    };
+
+    const getSelectedTime = (): string[] => {
+      return currentValues.value;
+    };
+
     const columns = computed(() => {
       let { minHour, maxHour, minMinute, maxMinute, minSecond, maxSecond } =
         props;
@@ -165,8 +188,11 @@ export default defineComponent({
     const onCancel = (...args: unknown[]) => emit('cancel', ...args);
     const onConfirm = (...args: unknown[]) => emit('confirm', ...args);
 
+    useExpose<TimePickerExpose>({ confirm, getSelectedTime });
+
     return () => (
       <Picker
+        ref={pickerRef}
         v-model={currentValues.value}
         v-slots={slots}
         columns={columns.value}
diff --git a/packages/vant/src/time-picker/index.ts b/packages/vant/src/time-picker/index.ts
index d060744c1..26a132412 100644
--- a/packages/vant/src/time-picker/index.ts
+++ b/packages/vant/src/time-picker/index.ts
@@ -5,7 +5,7 @@ export const TimePicker = withInstall(_TimePicker);
 export default TimePicker;
 export { timePickerProps } from './TimePicker';
 export type { TimePickerProps };
-export type { TimePickerColumnType } from './TimePicker';
+export type { TimePickerColumnType, TimePickerInstance } from './TimePicker';
 
 declare module 'vue' {
   export interface GlobalComponents {