<template>
<div>
<!-- 使用 van-address-list 组件 -->
<van-address-list
:list="addressList"
:disabled-list="disabledAddressList"
:default-tag-text="defaultTagText"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
@delete="onDelete"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 地址列表数据，需要提前准备好
addressList: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '广东省 深圳市 南山区 深南大道 10000 号',
},
// 其他地址数据...
],
// 已禁用的地址列表
disabledAddressList: ['2'], // 这里以地址的 id 为例
// 默认标签显示的文本
defaultTagText: '默认',
};
},
methods: {
// 添加地址的回调
onAdd() {
// 处理添加地址逻辑
console.log('添加地址');
},
// 编辑地址的回调
onEdit(address) {
// 处理编辑地址逻辑，address 参数包含了用户编辑的地址信息
console.log('编辑地址:', address);
},
// 选择地址的回调
onSelect(address) {
// 处理选择地址逻辑，address 参数包含了用户选择的地址信息
console.log('选择地址:', address);
},
// 删除地址的回调
onDelete(address) {
// 处理删除地址逻辑，address 参数包含了用户要删除的地址信息
console.log('删除地址:', address);
},
},
};
</script>
在上述代码中：
- addressList 是一个包含地址数据的数组，每个地址包括 id、name、tel、address 等信息。
- disabledAddressList 是已禁用的地址列表，这里以地址的 id 为例。
- defaultTagText 控制默认标签显示的文本。
通过这些属性，你可以根据实际需求配置 van-address-list 组件的外观和行为。在 @add、@edit、@select、@delete 事件回调中，你可以处理添加、编辑、选择和删除地址的逻辑。
确保在使用 van-address-list 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { AddressList } from 'vant';
Vue.use(AddressList);
转载请注明出处：http://www.zyzy.cn/article/detail/5704/Vant