Introduced
import Vue from 'vue';
import { AddressList } from 'vant';
Vue.use(AddressList);
Code demo
Basic usage
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="以下地址超出配送范围"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
/>
import { Toast } from 'vant';
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
}
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号'
}
]
}
},
methods: {
onAdd() {
Toast('新增地址');
},
onEdit(item, index) {
Toast('编辑地址:' + index);
}
}
}
Api
Props
Parameters
|
Description
|
Type
|
The default
|
v-model
|
The id of the address is currently selected
|
string
|
-
|
list
|
The address list
|
Address[]
|
[]
|
disabled-list
|
List of non-delivery addresses
|
Address[]
|
[]
|
disabled-text
|
Non-delivery prompts
|
string
|
-
|
switchable
|
Whether to allow the address to be switched
|
boolean
|
true
|
add-button-text
|
The bottom button text
|
string
|
新增地址
|
default-tag-text
v2.3.0
|
The default address label text
|
string
|
-
|
Events
The name of the event
|
Description
|
Callback parameters
|
add
|
Triggered when the new button is clicked
|
-
|
edit
|
Triggered when the edit button is clicked
|
item: address object, index: index
|
select
|
Triggered when switching selected addresses
|
item: address object, index: index
|
edit-disabled
|
Triggered when editing an address that cannot be shipped
|
item: address object, index: index
|
select-disabled
|
Triggered when an address that cannot be shipped is selected
|
item: address object, index: index
|
click-item
|
Triggered when you click on any address
|
item: address object, index: index
|
Address data structure
The key name
|
Description
|
Type
|
Id
|
A unique identity for each address
|
number |
string
|
name
|
The name of the conseer
|
string
|
tel
|
The receiving person's mobile phone number
|
number |
string
|
address
|
The address of receipt
|
string
|
isDefault
|
Whether it is the default address
|
boolean
|
Slots
Name
|
Description
|
default
|
Insert content below the list
|
top
|
Insert content at the top
|