breaking change(AddressEdit): adjust change-area event params

packages/vant/docs/markdown/migrate-from-v3.zh-CN.md

@@ -20,6 +20,7 @@
 - 支持通过 `v-model` 绑定当前选中的值，移除 `default-index` 属性
 - 重新定义了 `columns` 属性的结构
 - 移除了操作内部数据的实例方法，仅保留 `confirm` 方法
+- 新增 `getSelectedOptions` 实例方法
 - 调整了 `confirm`、`cancel`、`change` 事件的参数
 - 重命名 `item-height` 属性为 `option-height`
 - 重命名 `visible-item-count` 属性为 `visible-option-num`
@@ -89,6 +90,11 @@ emit('clickInput');
 
 - 移除了 `click` 和 `disabled` 事件，请使用 `click-tab` 事件代替
 
+#### AddressEdit
+
+- `change-area` 事件的参数调整为 `PickerOption[]` 类型
+- 移除未在文档中标注的 `getArea` 实例方法
+
 ## 样式变量调整
 
 ### 移除 Less 变量

packages/vant/src/address-edit/AddressEdit.tsx

@@ -25,7 +25,7 @@ import {
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Area, AreaList, AreaColumnOption, AreaInstance } from '../area';
+import { Area, AreaList, AreaInstance } from '../area';
 import { Cell } from '../cell';
 import { Form } from '../form';
 import { Field, FieldRule } from '../field';
@@ -37,6 +37,8 @@ import AddressEditDetail from './AddressEditDetail';
 
 // Types
 import type { AddressEditInfo, AddressEditSearchItem } from './types';
+import { PickerConfirmEventParams, PickerOption } from '../picker';
+import { AREA_EMPTY_CODE } from '../area/utils';
 
 const [name, bem, t] = createNamespace('address-edit');
 
@@ -121,9 +123,9 @@ export default defineComponent({
     );
 
     const areaText = computed(() => {
-      const { country, province, city, county, areaCode } = data;
+      const { province, city, county, areaCode } = data;
       if (areaCode) {
-        const arr = [country, province, city, county];
+        const arr = [province, city, county];
         if (province && province === city) {
           arr.splice(1, 1);
         }
@@ -137,15 +139,6 @@ export default defineComponent({
       () => props.searchResult?.length && detailFocused.value
     );
 
-    const assignAreaValues = () => {
-      if (areaRef.value) {
-        const detail: Record<string, string> = areaRef.value.getArea();
-        detail.areaCode = detail.code;
-        delete detail.code;
-        extend(data, detail);
-      }
-    };
-
     const onFocus = (key: string) => {
       detailFocused.value = key === 'addressDetail';
       emit('focus', key);
@@ -191,30 +184,30 @@ export default defineComponent({
       emit('changeDetail', val);
     };
 
-    const onAreaConfirm = (values: AreaColumnOption[]) => {
+    const assignAreaText = (options: PickerOption[]) => {
-      values = values.filter(Boolean);
+      data.province = options[0].text as string;
+      data.city = options[1].text as string;
+      data.county = options[2].text as string;
+    };
 
-      if (values.some((value) => !value.code)) {
+    const onAreaConfirm = ({
+      selectedValues,
+      selectedOptions,
+    }: PickerConfirmEventParams) => {
+      if (selectedValues.some((value) => value === AREA_EMPTY_CODE)) {
         Toast(t('areaEmpty'));
       } else {
         showAreaPopup.value = false;
-        assignAreaValues();
+        assignAreaText(selectedOptions);
-        emit('changeArea', values);
+        emit('changeArea', selectedOptions);
       }
     };
 
     const onDelete = () => emit('delete', data);
 
-    // get values of area component
-    const getArea = () => areaRef.value?.getValues() || [];
-
     // set area code to area component
     const setAreaCode = (code?: string) => {
       data.areaCode = code || '';
-
-      if (code) {
-        nextTick(assignAreaValues);
-      }
     };
 
     const onDetailBlur = () => {
@@ -253,21 +246,23 @@ export default defineComponent({
     };
 
     useExpose({
-      getArea,
       setAreaCode,
       setAddressDetail,
     });
 
-    watch(
-      () => props.areaList,
-      () => setAreaCode(data.areaCode)
-    );
-
     watch(
       () => props.addressInfo,
       (value) => {
         extend(data, DEFAULT_DATA, value);
-        setAreaCode(value.areaCode);
+        nextTick(() => {
+          const options = areaRef.value?.getSelectedOptions();
+          if (
+            options &&
+            options.every((option) => option.value !== AREA_EMPTY_CODE)
+          ) {
+            assignAreaText(options);
+          }
+        });
       },
       {
         deep: true,
@@ -371,8 +366,8 @@ export default defineComponent({
             lazyRender={false}
           >
             <Area
+              v-model={data.areaCode}
               ref={areaRef}
-              value={data.areaCode}
               loading={!areaListLoaded.value}
               areaList={props.areaList}
               columnsPlaceholder={props.areaColumnsPlaceholder}

packages/vant/src/address-edit/README.md

@@ -102,14 +102,14 @@ export default {
 
 | Event | Description | Arguments |
 | --- | --- | --- |
-| save | Emitted when the save button is clicked | content：form content |
+| save | Emitted when the save button is clicked | _info: AddressEditInfo_ |
-| focus | Emitted when field is focused | key: field name |
+| focus | Emitted when field is focused | _key: string_ |
-| delete | Emitted when confirming delete | content：form content |
+| delete | Emitted when confirming delete | _info: AddressEditInfo_ |
-| select-search | Emitted when a search result is selected | value: search content |
+| select-search | Emitted when a search result is selected | _value: string_ |
 | click-area | Emitted when the area field is clicked | - |
-| change-area | Emitted when area changed | values: area values |
+| change-area | Emitted when area changed | _selectedOptions: PickerOption[]_ |
-| change-detail | Emitted when address detail changed | value: address detail |
+| change-detail | Emitted when address detail changed | _value: string_ |
-| change-default | Emitted when switching default address | value: checked |
+| change-default | Emitted when switching default address | _checked: boolean_ |
 
 ### Slots
 

packages/vant/src/address-edit/README.zh-CN.md

@@ -100,16 +100,16 @@ export default {
 
 ### Events
 
-| 事件名         | 说明                       | 回调参数                    |
+| 事件名 | 说明 | 回调参数 |
-| -------------- | -------------------------- | --------------------------- |
+| --- | --- | --- |
-| save           | 点击保存按钮时触发         | content：表单内容           |
+| save | 点击保存按钮时触发 | _info: AddressEditInfo_ |
-| focus          | 输入框聚焦时触发           | key: 聚焦的输入框对应的 key |
+| focus | 输入框聚焦时触发 | _key: string_ |
-| delete         | 确认删除地址时触发         | content：表单内容           |
+| delete | 确认删除地址时触发 | _info: AddressEditInfo_ |
-| select-search  | 选中搜索结果时触发         | value: 搜索结果             |
+| select-search | 选中搜索结果时触发 | _value: string_ |
-| click-area     | 点击收件地区时触发         | -                           |
+| click-area | 点击收件地区时触发 | - |
-| change-area    | 修改收件地区时触发         | values: 地区信息            |
+| change-area | 修改收件地区时触发 | _selectedOptions: PickerOption[]_ |
-| change-detail  | 修改详细地址时触发         | value: 详细地址内容         |
+| change-detail | 修改详细地址时触发 | _value: string_ |
-| change-default | 切换是否使用默认地址时触发 | value: 是否选中             |
+| change-default | 切换是否使用默认地址时触发 | _checked: boolean_ |
 
 ### Slots
 

packages/vant/src/address-edit/types.ts

@@ -1,5 +1,4 @@
 import type { ComponentPublicInstance } from 'vue';
-import type { AreaColumnOption } from '../area';
 import type { AddressEditProps } from './AddressEdit';
 
 export type AddressEditSearchItem = {
@@ -21,7 +20,6 @@ export type AddressEditInfo = {
 };
 
 export type AddressEditExpose = {
-  getArea: () => AreaColumnOption[];
   setAreaCode: (code?: string | undefined) => void;
   setAddressDetail: (value: string) => void;
 };