使用vant中的位址編輯元件

1.首先先引入元件名稱，因為我是在vue的項目中進行使用的，每個人的使用情況不同但是總歸都是要進行引入的

import Vue from 'vue';
import { AddressEdit } from 'vant';

Vue.use(AddressEdit);
           

2.在位址欄編輯元件提供的areaList資料，點選進去，是有贊團隊的vant庫，裡面存儲了位址資訊，把它下載下傳過來，并将其中的area.js檔案粘貼到你的檔案夾中，在你的使用的.vue檔案中進行引入

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['請選擇', '請選擇', '請選擇']"
 @save="onSave"
/>
  </div>
</template>
<script>
import areaData from './area.js'  這個地方就是你引入的area檔案的位址
           

3.擷取位址欄表單的詳細内容，

 位址欄表單中有一個儲存按鈕，在點選儲存按鈕時，會将表單内容其實表單的最終内容也就是我們所說的onSave事件中的e，就是我們想要的表單内容，

//   點選儲存按鈕
    onSave(content){
        console.log（content）
    },
      列印出來的content就是我們想要的表單的最終結果
           

因為我也是剛使用vant架構建立自己的手機端項目，其他的使用的注意事項，會慢慢更新，我會把我在其中遇到的一些問題記錄下來，如果有哪些不對的地方，希望大神能夠多加指點，希望能夠得到更多大家的幫助。感謝