vant地址编辑回显,van-address-edit,vant弹出框底部位置定位,vant indexbar,vant地址级联异步加载,vant radio
Vant4 AddressEdit 是一款基于 Vue.js 框架开发的地址编辑组件，可用于在页面上显示和编辑地址信息。它包含了国际化支持、自定义校验规则、自动完成等功能，可以方便地集成到各种 Web 应用程序中。

以下是一个简单的 Vant4 AddressEdit 组件的示例代码：

html
<template>
<van-address-edit
:show-delete="false"
:show-set-default="false"
:is-saving="isSaving"
:address-info="addressInfo"
@save="onSave"
/>
</template>

<script>
import { ref } from 'vue';
import { AddressEdit } from 'vant';

export default {
components: {
[AddressEdit.name]: AddressEdit,
},
setup() {
const isSaving = ref(false);
const addressInfo = ref({
name: '',
tel: '',
address: '',
province: '',
city: '',
county: '',
areaCode: '',
postalCode: '',
});

const onSave = () => {
isSaving.value = true;
// 发送保存地址请求
setTimeout(() => {
isSaving.value = false;
}, 2000);
};

return {
isSaving,
addressInfo,
onSave,
};
},
};
</script>


在这个示例中，我们引入了 Vant4 AddressEdit 组件并将其放置在模板中。我们还使用了 ref 创建了两个响应式变量 isSaving 和 addressInfo，分别用于控制保存按钮的加载状态和存储地址信息。我们通过传递这些变量作为组件的 props 属性来初始化 AddressEdit 组件，并且在 @save 事件上注册了一个保存地址信息的回调函数。

此外，该示例代码还隐藏了删除和设为默认地址按钮，可以根据需求控制显示与否。