vant-ui AddressEdit地址編輯和van-area的用法說明

更新時間：2020年11月03日 08:43:21 作者：小憨憨不敢。

這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

AddressEdit 地址編輯

1.vant-ui地址編輯中已配置 :area-list=“areaList”，以初始化全部省市區(qū)的數(shù)據(jù)

這是結(jié)合vant-ui彈出層一起用的，用彈出層包裹省市區(qū)選擇的組件，然后根據(jù)需要，參照官方文檔，進(jìn)行相關(guān)配置，默認(rèn)底部彈出。

重要的是，官方?jīng)]有說明具體怎么使用，所以在這里，要獲取接收省市區(qū)的json數(shù)據(jù)。其中area.js文件在官方可以下載，放于assets/js/area.js ，然后引入文件，就可以了。

如下：

<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: "萬達(dá)廣場",
  address: "鄭州市二七區(qū)"
  }
 ];
 } else {
 this.searchResult = [];
 }
 }
 }
};
</script>

<style scoped>
</style>

補充知識：vue移動端地址編輯地址回顯

寫這篇文章主要是前面寫這個地址的時候遇到了一些坑，走了許多彎路，這里記錄一下，給新手朋友們指道，

這是編輯原圖

項目原圖

最開始我用了vant ui框架，在地址這方面vant一直很好用，地址列表省市區(qū)選擇組件都用，

最開始沒什么問題在經(jīng)歷了幾次版本更新之后不知道什么頁面與vant地址選擇組件起沖突，導(dǎo)致選擇省市區(qū)的時候彈框里空白，在經(jīng)歷了無數(shù)次嘗試之后，我放棄了改用了muse省市區(qū)選擇組件，但是地址回顯的時候由于后端返回不了城市編碼，沒辦法最后使用了vux ，

使用了vuex的組件又遇到一點麻煩，我是只有在地址列表把地址詳情傳過去，然后在created接受，并直接賦值給組件，這是時候發(fā)現(xiàn)頁面地址選擇部分白板，并沒有達(dá)到我們想要的回顯效果，后面研究了一下是因為我們在created直接賦值導(dǎo)致賦值實在頁面渲染完畢之前的這時候頁面就無法顯示渲染之前的內(nèi)容，下面是我的解決辦法

不能直接在created時給組件賦值，在methods寫個方法 0.1s之后再賦值 .1s已經(jīng)足夠頁面渲染完成只要頁面渲染完畢再輔助就能正常顯示