From 35a50012c76495119a44efa2cfc231f8b1921f40 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 16 Feb 2022 12:02:46 +0800
Subject: [PATCH] feat(Area): add getSelectedOptions method

---
 packages/vant/src/area/Area.tsx        | 14 +++++++++++++-
 packages/vant/src/area/README.md       | 11 ++++++++++-
 packages/vant/src/area/README.zh-CN.md | 11 ++++++++++-
 packages/vant/src/area/types.ts        |  3 ++-
 packages/vant/src/area/utils.ts        | 18 ++++++++++++------
 5 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/vant/src/area/Area.tsx b/packages/vant/src/area/Area.tsx
index b90622547..5ab827345 100644
--- a/packages/vant/src/area/Area.tsx
+++ b/packages/vant/src/area/Area.tsx
@@ -18,11 +18,15 @@ import {
 import { pickerSharedProps } from '../picker/Picker';
 import { INHERIT_PROPS, INHERIT_SLOTS, formatDataForCascade } from './utils';
 
+// Composables
+import { useExpose } from '../composables/use-expose';
+
 // Components
-import { Picker } from '../picker';
+import { Picker, type PickerInstance } from '../picker';
 
 // Types
 import type { AreaList } from './types';
+import type { PickerExpose } from '../picker/types';
 
 const [name, bem] = createNamespace('area');
 
@@ -47,6 +51,8 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const codes = ref<string[]>([]);
+    const picker = ref<PickerInstance>();
+
     const columns = computed(() => formatDataForCascade(props));
     const onChange = (...args: unknown[]) => emit('change', ...args);
     const onCancel = (...args: unknown[]) => emit('cancel', ...args);
@@ -84,8 +90,14 @@ export default defineComponent({
       { immediate: true }
     );
 
+    useExpose<PickerExpose>({
+      confirm: () => picker.value?.confirm(),
+      getSelectedOptions: () => picker.value?.getSelectedOptions() || [],
+    });
+
     return () => (
       <Picker
+        ref={picker}
         v-model={codes.value}
         v-slots={pick(slots, INHERIT_SLOTS)}
         class={bem()}
diff --git a/packages/vant/src/area/README.md b/packages/vant/src/area/README.md
index 9917787d9..9dd385804 100644
--- a/packages/vant/src/area/README.md
+++ b/packages/vant/src/area/README.md
@@ -152,6 +152,15 @@ export default {
 | columns-top     | Custom content above columns | -         |
 | columns-bottom  | Custom content below columns | -         |
 
+### Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Area instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| confirm | Stop scrolling and emit confirm event | - | - |
+| getSelectedOptions | Get current selected options | - | _PickerOption[]_ |
+
 ### Types
 
 The component exports the following type definitions:
@@ -168,5 +177,5 @@ import type { AreaInstance } from 'vant';
 
 const areaRef = ref<AreaInstance>();
 
-areaRef.value?.reset();
+areaRef.value?.confirm();
 ```
diff --git a/packages/vant/src/area/README.zh-CN.md b/packages/vant/src/area/README.zh-CN.md
index 6357014ec..c897b4e91 100644
--- a/packages/vant/src/area/README.zh-CN.md
+++ b/packages/vant/src/area/README.zh-CN.md
@@ -154,6 +154,15 @@ export default {
 | columns-top      | 自定义选项上方内容     | -    |
 | columns-bottom   | 自定义选项下方内容     | -    |
 
+### 方法
+
+通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| confirm | 停止惯性滚动并触发 `confirm` 事件 | - | - |
+| getSelectedOptions | 获取当前选中的选项 | - | _PickerOption[]_ |
+
 ### 类型定义
 
 组件导出以下类型定义：
@@ -170,7 +179,7 @@ import type { AreaInstance } from 'vant';
 
 const areaRef = ref<AreaInstance>();
 
-areaRef.value?.reset();
+areaRef.value?.confirm();
 ```
 
 ## 常见问题
diff --git a/packages/vant/src/area/types.ts b/packages/vant/src/area/types.ts
index c9c8f6478..37cf92d22 100644
--- a/packages/vant/src/area/types.ts
+++ b/packages/vant/src/area/types.ts
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 import type { ComponentPublicInstance } from 'vue';
+import { PickerExpose } from '../picker/types';
 import type { AreaProps } from './Area';
 
 export type AreaList = {
@@ -8,4 +9,4 @@ export type AreaList = {
   province_list: Record<string, string>;
 };
 
-export type AreaInstance = ComponentPublicInstance<AreaProps>;
+export type AreaInstance = ComponentPublicInstance<AreaProps, PickerExpose>;
diff --git a/packages/vant/src/area/utils.ts b/packages/vant/src/area/utils.ts
index 258d87c95..a77f859fb 100644
--- a/packages/vant/src/area/utils.ts
+++ b/packages/vant/src/area/utils.ts
@@ -1,7 +1,7 @@
 import type { AreaProps } from '.';
 import type { PickerOption } from '../picker';
 
-const EMPTY_CODE = '000000';
+export const AREA_EMPTY_CODE = '000000';
 
 export const INHERIT_SLOTS = [
   'title',
@@ -24,8 +24,8 @@ export const INHERIT_PROPS = [
 
 const makeOption = (
   text = '',
-  value = EMPTY_CODE,
-  children?: PickerOption[]
+  value = AREA_EMPTY_CODE,
+  children: PickerOption[] | undefined = undefined
 ): PickerOption => ({
   text,
   value,
@@ -48,7 +48,13 @@ export function formatDataForCascade({
   const getProvinceChildren = () => {
     if (showCity) {
       return placeholder.length
-        ? [makeOption(placeholder[0], EMPTY_CODE, showCounty ? [] : undefined)]
+        ? [
+            makeOption(
+              placeholder[0],
+              AREA_EMPTY_CODE,
+              showCounty ? [] : undefined
+            ),
+          ]
         : [];
     }
   };
@@ -94,9 +100,9 @@ export function formatDataForCascade({
   if (placeholder.length) {
     const county = showCounty ? [makeOption(placeholder[2])] : undefined;
     const city = showCity
-      ? [makeOption(placeholder[1], EMPTY_CODE, county)]
+      ? [makeOption(placeholder[1], AREA_EMPTY_CODE, county)]
       : undefined;
-    options.unshift(makeOption(placeholder[0], EMPTY_CODE, city));
+    options.unshift(makeOption(placeholder[0], AREA_EMPTY_CODE, city));
   }
 
   return options;