diff --git a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md b/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md index 764216fc7..393e67e22 100644 --- a/packages/vant/docs/markdown/migrate-from-v3.zh-CN.md +++ b/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 变量 diff --git a/packages/vant/src/address-edit/AddressEdit.tsx b/packages/vant/src/address-edit/AddressEdit.tsx index 36258f6cd..e85a8ead2 100644 --- a/packages/vant/src/address-edit/AddressEdit.tsx +++ b/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 = 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[]) => { - values = values.filter(Boolean); + const assignAreaText = (options: PickerOption[]) => { + 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(); - emit('changeArea', values); + assignAreaText(selectedOptions); + 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} > AreaColumnOption[]; setAreaCode: (code?: string | undefined) => void; setAddressDetail: (value: string) => void; };