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

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

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

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

<style scoped>
</style>

補(bǔ)充知識(shí)：vue移動(dòng)端地址編輯地址回顯

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

這是編輯原圖

項(xiàng)目原圖

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

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

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

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