1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 AddressList：
<template>
<div>
<!-- 其他页面内容 -->
<!-- AddressList 组件 -->
<van-address-list
:list="addressList"
@select="onSelect"
/>
</div>
</template>
<script>
import { VanAddressList } from 'vant';
export default {
components: {
VanAddressList
},
data() {
return {
addressList: [
{
id: '1',
name: 'John Doe',
tel: '1234567890',
address: '123 Main St, City, Country',
isDefault: true
},
{
id: '2',
name: 'Jane Smith',
tel: '0987654321',
address: '456 Side St, Town, Country',
isDefault: false
}
// 可以继续添加其他地址
]
};
},
methods: {
onSelect(address) {
// 选择地址的逻辑
console.log('选择地址：', address);
}
}
};
</script>
在上述示例中，van-address-list 组件用于创建地址列表页面。list 属性绑定了地址列表的数据，通过监听 @select 事件，你可以在用户选择地址时执行相应的逻辑。
请根据你的实际需求进行样式和行为的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/5858/Vant