vant-ui的van-area使用

由於官方例子中並沒有太多詳情，因此記錄之，方便以后使用。

1.配置 :area-list="areaList"，以初始化全部省市區的數據，其中area.js文件在官方可以下載，放於assets/js/area.js

2. onAddrConfirm (e) 獲取數據

<template>
  <div>
    <van-address-edit
    :area-list="areaList"
    :address-info="addressInfo"
    show-postal
    show-delete
    show-set-default
    show-search-result
    :search-result="searchResult"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
    />
    <div><span>公司名稱：</span><input v-model="comName"/></div>
    <div><span>姓名：</span><input v-model="name"/></div>
    <div><span>移動電話：</span><input v-model="phone"/></div>
    <div style="font-size: 14px"><span style="margin-left: 13px">公司地址：</span><input class="addr-input" v-model="province" @click="show" />
      <input class="addr-input" v-model="city" @click="show"/>
      <input class="addr-input" v-model="district" @click="show"/>
      <van-field
        v-model="street"
        type="text"
        placeholder="街道門牌、樓層房間號等信息"
      />
    </div>
    <div v-show="flag">
      <van-area :area-list="areaList" :item-height=25 @confirm="onAddrConfirm" @cancel="shut" :value="addrCode"/>
    </div>
  </div>
</template>

<script>
import areaList from '../../assets/js/area'
export default {
  components: {areaList},
  data () {
    return {
      comName: {},
      searchResult: '',
      addrCode: '440105',
      province: '',
      city: '',
      district: '',
      street: '',
      companyName: '',
      name: '',
      phone: '',
      address: '',
      areaList: null,
      flag: false
      // flag: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      // 初始化地址選擇器
      this.areaList = areaList.areaList // 初始化選擇器數據 // 初始化復選框
      this.allMajor = this.getMajor()
    },
    show () {
      this.flag = true
    },
    onAddrConfirm (e) { // 點擊確認，獲取所選的省市區數據 // 確定選擇,返回的必定是三元素數組
      console.log('this.onAddrConfirm=>e', e)
      this.province = e[0].name
      this.city = e[1].name
      this.district = e[2].name
      this.flag = false
    },
    shut () {
      this.flag = false
    },
    onChangeDetail (val) {
      if (val) {
        this.searchResult = [{
          name: '黃龍萬科中心',
          address: '杭州市西湖區'
        }]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style scoped>
  @import '../../assets/css/mycss.css';
</style>