AddressEdit 地址编辑
1.vant-ui地址编辑中已配置 :area-list=“areaList”,以初始化全部省市区的数据
-
这是结合vant-ui弹出层一起用的,用弹出层包裹省市区选择的组件,然后根据需要,参照官方文档,进行相关配置,默认底部弹出。
-
重要的是,官方没有说明具体怎么使用,所以在这里,要获取接收省市区的json数据。其中area.js文件在官方可以下载,放于assets/js/area.js ,然后引入文件,就可以了。
4 如下:
<template>
<div>
<van-nav-bar title="地址信息" left-text="返回" left-arrow @click-left="onClickLeft"/>
<van-address-edit
:area-list="areaList"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</div>
</template>
<script>
import areaList from "../assets/js/area.js";
import { Toast } from "vant";
export default {
name: "Address",
data() {
return {
areaList,
searchResult: []
};
},
methods: {
onClickLeft() {
this.$router.push("/my");
},
onSave() {
this.$router.push("/my");
},
onDelete() {
Toast("delete");
this.$router.push("/my");
},
onChangeDetail(val) {
if (val) {
this.searchResult = [
{
name: "万达广场",
address: "郑州市二七区"
}
];
} else {
this.searchResult = [];
}
}
}
};
</script>
<style scoped>
</style>