AddressList 地址列表

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/address-list

用于展示地址列表, 并提供选中交互, 编辑, 新增的交互界面. 一般会使用一个单独页面承载显示. 因为有新增与编辑一般使用 Popup 来弹出.

基本用法:

<van-address-list v-model="selected" :list="list">
</van-address-list>

其中 list 用于绑定已有地址, selected 表示选中的地址的 id.

绑定地址数据的类型定义为:

export type AddressListAddress = {
    id: Numeric;
    tel: Numeric;
    name: string;
    address: string;
    isDefault?: boolean;
};

组件包含两个部分:

• 一个地址的列表, 提供单选框, 姓名, 电话, 详细地址的显示, 以及一个编辑的按钮. 默认地址会呈现默认的脚标 (需要配置).
• 另一个部分是固定在底部的新增按钮.

常用属性:

• v-model 用于绑定选中的地址项的 id.
• list 用于绑定现有地址. 是 AddressListAddress[] 类型.
• default-tag-text 默认地址的文案. 需要配置才会显示.

常用事件:

• add 点击新增按钮时触发
• edit 点击编辑时触发. 函数参数为: item: AddressListAddress, index: number