使用vant中的地址編輯組件

1.首先導入組件

import Vue from 'vue'; import { AddressEdit } from 'vant'; Vue.use(AddressEdit);

使用組件

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['請選擇', '請選擇', '請選擇']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

 

2.找到vant的area省市區選擇

搜索areaList找到 Area.json，點進去，github拷貝一份下來，命名為areaData.js

3.在用的組件中導入areaData.js文件

4.最后給areaList賦值

data() { return { areaList:areaData, searchResult: [], }; }