AddressEdit 地址编辑

介绍

地址编辑组件,用于新建、更新、删除地址信息。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { AddressEdit } from 'vant';
  3. const app = createApp();
  4. app.use(AddressEdit);

代码演示

基础用法

  1. <van-address-edit
  2. :area-list="areaList"
  3. show-delete
  4. show-set-default
  5. show-search-result
  6. :search-result="searchResult"
  7. :area-columns-placeholder="['请选择', '请选择', '请选择']"
  8. @save="onSave"
  9. @delete="onDelete"
  10. @change-detail="onChangeDetail"
  11. />
  1. import { ref } from 'vue';
  2. import { showToast } from 'vant';
  3. export default {
  4. setup() {
  5. const searchResult = ref([]);
  6. const onSave = () => showToast('save');
  7. const onDelete = () => showToast('delete');
  8. const onChangeDetail = (val) => {
  9. if (val) {
  10. searchResult.value = [
  11. {
  12. name: '黄龙万科中心',
  13. address: '杭州市西湖区',
  14. },
  15. ];
  16. } else {
  17. searchResult.value = [];
  18. }
  19. };
  20. return {
  21. onSave,
  22. onDelete,
  23. areaList,
  24. searchResult,
  25. onChangeDetail,
  26. };
  27. },
  28. };

API

Props

参数说明类型默认值
area-list地区列表object-
area-columns-placeholder地区选择列占位提示文字string[][]
area-placeholder地区输入框占位提示文字string选择省 / 市 / 区
address-info地址信息初始值AddressEditInfo{}
search-result详细地址搜索结果AddressEditSearchItem[][]
show-delete是否显示删除按钮booleanfalse
show-set-default是否显示默认地址栏booleanfalse
show-search-result是否显示搜索结果booleanfalse
show-area是否显示地区booleantrue
show-detail是否显示详细地址booleantrue
disable-area是否禁用地区选择booleanfalse
save-button-text保存按钮文字string保存
delete-button-text删除按钮文字string删除
detail-rows详细地址输入框行数number | string1
detail-maxlength详细地址最大长度number | string200
is-saving是否显示保存按钮加载动画booleanfalse
is-deleting是否显示删除按钮加载动画booleanfalse
tel-validator手机号格式校验函数string => boolean-
tel-maxlength手机号最大长度number | string-
validator自定义校验函数(key, val) => string-

Events

事件名说明回调参数
save点击保存按钮时触发info: AddressEditInfo
focus输入框聚焦时触发key: string
delete确认删除地址时触发info: AddressEditInfo
select-search选中搜索结果时触发value: string
click-area点击收件地区时触发-
change-area修改收件地区时触发selectedOptions: PickerOption[]
change-detail修改详细地址时触发value: string
change-default切换是否使用默认地址时触发checked: boolean

Slots

名称说明
default在邮政编码下方插入内容

方法

通过 ref 可以获取到 AddressEdit 实例并调用实例方法,详见组件实例方法

方法名说明参数返回值
setAddressDetail设置详细地址addressDetail: string-

类型定义

组件导出以下类型定义:

  1. import type {
  2. AddressEditInfo,
  3. AddressEditProps,
  4. AddressEditInstance,
  5. AddressEditSearchItem,
  6. } from 'vant';

AddressEditInstance 是组件实例的类型,用法如下:

  1. import { ref } from 'vue';
  2. import type { AddressEditInstance } from 'vant';
  3. const addressEditRef = ref<AddressEditInstance>();
  4. addressEditRef.value?.setAddressDetail('');

AddressEditInfo 数据格式

注意:AddressEditInfo 仅作为初始值传入,表单最终内容可以在 save 事件中获取。

key说明类型
name姓名string
tel手机号string
province省份string
city城市string
county区县string
addressDetail详细地址string
areaCode地区编码,通过 省市区选择 获取(必填)string
isDefault是否为默认地址boolean

AddressEditSearchItem 数据格式

key说明类型
name地名string
address详细地址string

省市县列表数据格式

请参考 Area 省市区选择 组件。

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
—van-address-edit-paddingvar(—van-padding-sm)-
—van-address-edit-buttons-paddingvar(—van-padding-xl) var(—van-padding-base)-
—van-address-edit-button-margin-bottomvar(—van-padding-sm)-
—van-address-edit-button-font-sizevar(—van-font-size-lg)-

AddressEdit 地址编辑 - 图1