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 = () => {
  30. Toast('新增地址');
  31. };
  32. const onEdit = (item, index) => {
  33. Toast('编辑地址:' + index);
  34. };
  35. return {
  36. list,
  37. onAdd,
  38. onEdit,
  39. disabledList,
  40. chosenAddressId,
  41. };
  42. },
  43. };

API

Props

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

Events

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

Address 数据结构

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

Slots

名称说明参数
default在列表下方插入内容-
top在顶部插入内容-
item-bottom v2.5.0在列表项底部插入内容列表项的值

样式变量

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

名称默认值描述
@address-list-padding@padding-sm @padding-sm 80px-
@address-list-disabled-text-color@gray-6-
@address-list-disabled-text-padding@padding-base * 5 0 @padding-md-
@address-list-disabled-text-font-size@font-size-md-
@address-list-disabled-text-line-height@line-height-md-
@address-list-add-button-z-index999-
@address-list-item-padding@padding-sm-
@address-list-item-text-color@text-color-
@address-list-item-disabled-text-color@gray-5-
@address-list-item-font-size13px-
@address-list-item-line-height@line-height-sm-
@address-list-item-radio-icon-color@red-
@address-list-edit-icon-size20px-

AddressList 地址列表 - 图1