1. 安装 Vant4：
确保你已经安装了 Vant4，可以使用 npm 或 yarn 安装：
npm install vant@next --save
# 或
yarn add vant@next
2. 在你的 Vue 组件中引入 AddressEdit：
<template>
<div>
<!-- 其他页面内容 -->
<!-- AddressEdit 组件 -->
<van-address-edit
v-model="addressData"
show-postal
show-set-default
show-delete
@save="onSave"
@delete="onDelete"
/>
</div>
</template>
<script>
import { VanAddressEdit } from 'vant';
export default {
components: {
VanAddressEdit
},
data() {
return {
addressData: {
name: '',
tel: '',
province: '',
city: '',
county: '',
addressDetail: '',
postalCode: '',
isDefault: false
}
};
},
methods: {
onSave() {
// 保存地址的逻辑
console.log('保存地址：', this.addressData);
},
onDelete() {
// 删除地址的逻辑
console.log('删除地址：', this.addressData);
}
}
};
</script>
在上述示例中，van-address-edit 组件用于创建地址编辑页面。v-model 绑定了地址编辑的数据，show-postal、show-set-default 和 show-delete 分别表示是否显示邮政编码、设置默认地址和删除地址的选项。
通过监听 @save 和 @delete 事件，你可以在用户保存和删除地址时执行相应的逻辑。在实际项目中，你可能需要将 addressData 存储到后端或进行其他操作。
请根据你的实际需求进行样式和行为的定制。
转载请注明出处：http://www.zyzy.cn/article/detail/5857/Vant