AddressList 地址列表

使用指南

  1. import { AddressList } from 'vant';
  3. Vue.use(AddressList);

代码演示

基础用法

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

API

参数说明类型默认值版本
v-model当前选中地址的 idString--
list地址列表Array[]-
add-button-text底部按钮文字String新增地址-
disabled-list不可配送地址列表Array[]1.3.0
disabled-text不可配送提示文案String-1.3.0
switchable是否允许切换地址Booleantrue1.3.8

Event

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

数据格式

地址列表字段说明

key说明类型
id每条地址的唯一标识String | Number
name收货人姓名String
tel收货人手机号String | Number
address收货地址String

Slot

名称说明
-在列表下方插入内容
top在顶部插入内容

原文: https://youzan.github.io/vant/#/zh-CN/address-list