Vant AddressList 地址列表

引入

import Vue from 'vue';
import { AddressList } from 'vant';

Vue.use(AddressList);

代碼演示

基礎(chǔ)用法

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  disabled-text="以下地址超出配送范圍"
  default-tag-text="默認(rèn)"
  @add="onAdd"
  @edit="onEdit"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '張三',
          tel: '13000000000',
          address: '浙江省杭州市西湖區(qū)文三路 138 號(hào)東方通信大廈 7 樓 501 室'
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅區(qū)莫干山路 50 號(hào)'
        }
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市濱江區(qū)江南大道 15 號(hào)'
        }
      ]
    }
  },
  methods: {
    onAdd() {
      Toast('新增地址');
    },
    onEdit(item, index) {
      Toast('編輯地址:' + index);
    }
  }
}

API

Props

Events

Address 數(shù)據(jù)結(jié)構(gòu)

Slots