<template>
<van-address-edit
v-model="address"
show-search-result
@save="onSave"
/>
</template>
<script>
import { AddressEdit } from 'vant';
export default {
components: {
[AddressEdit.name]: AddressEdit,
},
data() {
return {
address: {
name: '',
tel: '',
province: '',
city: '',
county: '',
addressDetail: '',
postalCode: '',
isDefault: false,
},
};
},
methods: {
onSave() {
// 处理保存地址的逻辑
console.log('保存地址:', this.address);
},
},
};
</script>
在这个示例中：
- v-model="address" 用于双向绑定地址数据。
- show-search-result 属性表示是否显示地址搜索结果，可以根据实际需求选择是否使用。
- @save 事件会在保存地址时触发，你可以在 onSave 方法中处理保存地址的逻辑。
你可以根据实际需求添加其他属性或者定制样式。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5769/Vant