vant-ui Address Editアドレス編集とvan-araの使い方説明

Address Editアドレス編集
1.vant-uiアドレス編集では、エリアa-list=「araList」を初期化するように構成されています。全省市区のデータを初期化します。
これはvant-uiポップアップ層を結合して使うもので、ポップアップ層で省市街地で選択されたコンポーネントを包んで、必要に応じて、公的文書を参照して、関連配置を行い、デフォルトでは底部にポップアップする。
重要なのは、具体的にどのように使うかは公式には説明されていませんので、ここでは、受信省市街地のjsonデータを取得します。その中でもara.jsファイルはオフィシャルでダウンロードできます。astes/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: "    ",
  address: "      "
  }
 ];
 } else {
 this.searchResult = [];
 }
 }
 }
};
</script>

<style scoped>
</style>

補足の知識：vueモバイル端末アドレス編集住所返顕
この文章を書くのは主に前にこの住所を書く時、いくつかのピットに出会いました。たくさんの回り道をしました。ここで記録してください。新米の友達に教えてあげます。
これは原図の編集です

プロジェクト原図
最初はvant uiフレームを使っていましたが、住所の面ではvantはずっと使いやすいです。
最初は何回かのバージョンの更新を経験した後、どのページがvantアドレス選択部品と衝突して、省市街区を選ぶ時にボックスの中の空白を弾きました。何回かの試みを経験した後、muse省市街地の選択部品に切り替えるのを諦めましたが、住所が表示される時はバックエンドが都市コードに戻らないので、仕方なく最後にvuxを使いました。
vuexのコンポーネントを使って、もう一つのトラブルに遭遇しました。アドレスリストで住所の詳細を伝えてから、createdで受け取り、コンポーネントに直接値を付けました。これは時にはページアドレス選択部分のホワイトボードを発見しました。後で検討したのは、私達がcreatedで直接に値を賦課して本当にページをレンダリングし終わる前のこの時にページにレンダリングする前の内容を表示することができなくて、以下は私の解決方法です。
直接createdの時にコンポーネントに値を付けてはいけません。methodsに方法を書いて0.1 s後に値を付けます。1 sは十分なページでレンダリングが完了しました。ページのレンダリングが終わったら、サポートすれば正常に表示されます。


完璧に解決します
以上のvant-ui Address Editアドレスの編集者とvan-araの使い方説明は小編集が皆さんに共有した内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。