展示收货地址列表。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import { AddressList } from "vant";
const app = createApp();
app.use(AddressList);
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="以下地址超出配送范围"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
/>
import { ref } from "vue";
import { Toast } from "vant";
export default {
setup() {
const chosenAddressId = ref("1");
const list = [
{
id: "1",
name: "张三",
tel: "13000000000",
address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
isDefault: true,
},
{
id: "2",
name: "李四",
tel: "1310000000",
address: "浙江省杭州市拱墅区莫干山路 50 号",
},
];
const disabledList = [
{
id: "3",
name: "王五",
tel: "1320000000",
address: "浙江省杭州市滨江区江南大道 15 号",
},
];
const onAdd = () => Toast("新增地址");
const onEdit = (item, index) => Toast("编辑地址:" + index);
return {
list,
onAdd,
onEdit,
disabledList,
chosenAddressId,
};
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前选中地址的 id | string | - |
list | 地址列表 | Address[] | []
|
disabled-list | 不可配送地址列表 | Address[] | []
|
disabled-text | 不可配送提示文案 | string | - |
switchable | 是否允许切换地址 | boolean | true
|
add-button-text | 底部按钮文字 | string | 新增地址
|
default-tag-text | 默认地址标签文字 | string | - |
事件名 | 说明 | 回调参数 |
---|---|---|
add | 点击新增按钮时触发 | - |
edit | 点击编辑按钮时触发 | item: Address, index: number |
select | 切换选中的地址时触发 | item: Address, index: number |
edit-disabled | 编辑不可配送的地址时触发 | item: Address, index: number |
select-disabled | 选中不可配送的地址时触发 | item: Address, index: number |
click-item | 点击任意地址时触发 | item: Address, index: number |
键名 | 说明 | 类型 |
---|---|---|
id | 每条地址的唯一标识 | number | string |
name | 收货人姓名 | string |
tel | 收货人手机号 | number | string |
address | 收货地址 | string |
isDefault | 是否为默认地址 | boolean |
名称 | 说明 | 参数 |
---|---|---|
default | 在列表下方插入内容 | - |
top | 在顶部插入内容 | - |
item-bottom | 在列表项底部插入内容 | item: Address |
tag v3.0.9
|
自定义列表项标签内容 | item: Address |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-address-list-padding | var(--van-padding-sm) var(--van-padding-sm) 80px | - |
--van-address-list-disabled-text-color | var(--van-gray-6) | - |
--van-address-list-disabled-text-padding | var(--van-padding-base) * 5 0 var(--van-padding-md) | - |
--van-address-list-disabled-text-font-size | var(--van-font-size-md) | - |
--van-address-list-disabled-text-line-height | var(--van-line-height-md) | - |
--van-address-list-add-button-z-index | 999 | - |
--van-address-list-item-padding | var(--van-padding-sm) | - |
--van-address-list-item-text-color | var(--van-text-color) | - |
--van-address-list-item-disabled-text-color | var(--van-gray-5) | - |
--van-address-list-item-font-size | 13px | - |
--van-address-list-item-line-height | var(--van-line-height-sm) | - |
--van-address-list-item-radio-icon-color | var(--van-danger-color) | - |
--van-address-list-edit-icon-size | 20px | - |
介绍感谢你使用 Vant。以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下...
介绍Vant 默认采用中文作为语言,如果需要使用其他语言,可以参考下面的方案。多语言切换Vant 通过 Locale 组件实现多语言支持,...
Typography 字体我们对字体进行统一规范,力求在各个操作系统下都有最佳展示效果。字体 字号层级字体大小举例辅助文字12px Extra...