<template>
<div>
<!-- 使用 van-address-edit 组件 -->
<van-address-edit
:area-list="areaList"
:show-postal="showPostal"
:show-delete="showDelete"
:show-set-default="showSetDefault"
:is-saving="isSaving"
:is-deleting="isDeleting"
@save="onSave"
@delete="onDelete"
@cancel="onCancel"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 地区列表数据，需要提前准备好
areaList: [],
// 是否显示邮政编码
showPostal: true,
// 是否显示删除按钮
showDelete: true,
// 是否显示设置默认地址按钮
showSetDefault: true,
// 是否正在保存中
isSaving: false,
// 是否正在删除中
isDeleting: false,
};
},
methods: {
// 保存地址的回调
onSave(address) {
// 处理保存逻辑，address 参数包含了用户编辑的地址信息
console.log('保存地址:', address);
},
// 删除地址的回调
onDelete(address) {
// 处理删除逻辑，address 参数包含了用户要删除的地址信息
console.log('删除地址:', address);
},
// 取消编辑的回调
onCancel() {
// 处理取消编辑逻辑
console.log('取消编辑');
},
},
};
</script>
在上述代码中：
- areaList 是一个地区列表数据，需要提前准备好，以提供用户选择地址的选项。
- showPostal 控制是否显示邮政编码输入框。
- showDelete 控制是否显示删除按钮。
- showSetDefault 控制是否显示设置默认地址按钮。
- isSaving 控制是否正在保存中。
- isDeleting 控制是否正在删除中。
通过这些属性，你可以根据实际需求配置 van-address-edit 组件的外观和行为。在 @save、@delete、@cancel 事件回调中，你可以处理保存、删除和取消编辑的逻辑。
确保在使用 van-address-edit 组件前，你的项目中已经正确引入了 Vant 组件库。如果你的项目中还没有引入 Vant，你需要先安装 Vant，并在需要使用的地方引入样式和组件。
npm install vant
然后在需要使用的地方引入：
import 'vant/lib/index.css';
import { AddressEdit } from 'vant';
Vue.use(AddressEdit);
转载请注明出处：http://www.zyzy.cn/article/detail/5703/Vant