Vant3 中文入门教程 Vant3 AddressList 地址列表

2024-02-25 开发教程 Vant3 中文入门教程 匿名 4

介绍

展示收货地址列表。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

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,
};
},
};

API

Props

参数说明类型默认值
v-model当前选中地址的 id

string

-
list地址列表

Address[]

[]

disabled-list不可配送地址列表

Address[]

[]

disabled-text不可配送提示文案

string

-
switchable是否允许切换地址

boolean

true

add-button-text底部按钮文字

string

新增地址

default-tag-text默认地址标签文字

string

-

Events

事件名说明回调参数
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

Address 数据结构

键名说明类型
id每条地址的唯一标识

number | string

name收货人姓名

string

tel收货人手机号

number | string

address收货地址

string

isDefault是否为默认地址

boolean

Slots

名称说明参数
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

-