AddressList 地址列表

介绍

展示地址信息列表。

引入

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

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

代码演示

基础用法

  1. <van-address-list
  2. v-model="chosenAddressId"
  3. :list="list"
  4. :disabled-list="disabledList"
  5. disabled-text="以下地址超出配送范围"
  6. default-tag-text="默认"
  7. @add="onAdd"
  8. @edit="onEdit"
  9. />
  1. import { ref } from 'vue';
  2. import { Toast } from 'vant';
  3. export default {
  4. setup() {
  5. const chosenAddressId = ref('1');
  6. const list = [
  7. {
  8. id: '1',
  9. name: '张三',
  10. tel: '13000000000',
  11. address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
  12. isDefault: true,
  13. },
  14. {
  15. id: '2',
  16. name: '李四',
  17. tel: '1310000000',
  18. address: '浙江省杭州市拱墅区莫干山路 50 号',
  19. },
  20. ];
  21. const disabledList = [
  22. {
  23. id: '3',
  24. name: '王五',
  25. tel: '1320000000',
  26. address: '浙江省杭州市滨江区江南大道 15 号',
  27. },
  28. ];
  29. const onAdd = () => Toast('新增地址');
  30. const onEdit = (item, index) => Toast('编辑地址:' + index);
  31. return {
  32. list,
  33. onAdd,
  34. onEdit,
  35. disabledList,
  36. chosenAddressId,
  37. };
  38. },
  39. };

API

Props

参数说明类型默认值
v-model当前选中地址的 idstring-
list地址列表AddressListAddress[][]
disabled-list不可配送地址列表AddressListAddress[][]
disabled-text不可配送提示文案string-
switchable是否允许切换地址booleantrue
add-button-text底部按钮文字string新增地址
default-tag-text默认地址标签文字string-

Events

事件名说明回调参数
add点击新增按钮时触发-
edit点击编辑按钮时触发item: AddressListAddress, index: number
select切换选中的地址时触发item: AddressListAddress, index: number
edit-disabled编辑不可配送的地址时触发item: AddressListAddress, index: number
select-disabled选中不可配送的地址时触发item: AddressListAddress, index: number
click-item点击任意地址时触发item: AddressListAddress, index: number

AddressListAddress 数据结构

键名说明类型
id每条地址的唯一标识number | string
name姓名string
tel手机号number | string
address详细地址string
isDefault是否为默认地址boolean

Slots

名称说明参数
default在列表下方插入内容-
top在顶部插入内容-
item-bottom在列表项底部插入内容item: AddressListAddress
tag v3.0.9自定义列表项标签内容item: AddressListAddress

类型定义

组件导出以下类型定义:

  1. import type { AddressListProps, AddressListAddress } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-address-list-paddingvar(—van-padding-sm) var(—van-padding-sm) 80px-
—van-address-list-disabled-text-colorvar(—van-text-color-2)-
—van-address-list-disabled-text-paddingvar(—van-padding-base) * 5 0 var(—van-padding-md)-
—van-address-list-disabled-text-font-sizevar(—van-font-size-md)-
—van-address-list-disabled-text-line-heightvar(—van-line-height-md)-
—van-address-list-add-button-z-index999-
—van-address-list-item-paddingvar(—van-padding-sm)-
—van-address-list-item-text-colorvar(—van-text-color)-
—van-address-list-item-disabled-text-colorvar(—van-text-color-3)-
—van-address-list-item-font-size13px-
—van-address-list-item-line-heightvar(—van-line-height-sm)-
—van-address-list-item-radio-icon-colorvar(—van-danger-color)-
—van-address-list-edit-icon-size20px-

AddressList 地址列表 - 图1