m-city

city-select

install

npm install m-city -S

use

//main.js

import mCity from 'm-city'
Vue.use(mCity)

<template>
 <div>
    <div class="item" @click="showAddress(3)">
      <span class="title">选择城市</span>
      <span class="rightText">
        {{addressName}}
      </span>
      <img  class="arrow" :src="require('@/assets/img/img_comm_skip.png')" alt="">
    </div>
    <m-city
      :showAddressPicker="areaObj.showAddressPicker"
      :init="areaObj.regionName"
      :regionData="areaObj.regionData"
      ref="regionSelect"
      :type="cityType"
      @save-address="saveAddress"
      @hide-picker="hidePicker"
    >
      <!--type=city 省市区   type=area 省市-->
    </m-city>
</div>
</template>

<script>
import {Indicator} from 'mint-ui';
export default{
  data(){
    return{
      addressName:'',
      cityType:'area',//type=city 省市区   type=area 省市
      areaObj:{
        regionName:'',
        regionData:[],
        regionId:null,
        showAddressPicker: false,
      }
    }
  },
  mounted(){
    this.getAddressData(1);
  },
  methods:{
    showAddress(type){
      console.log(type); //type=city 省市区   type=area 省市
      if (this.areaObj.regionData != null && this.areaObj.regionData.length > 0) {
        this.areaObj.showAddressPicker = true;
      } else {
        Indicator.open();
        this.getAddressData();
      }
    },
    saveAddress(regionId, val,val2){
      // 从子组件接受返回所选值 val
      console.log('val2:'+val2);
      this.areaObj.regionId = regionId;
      this.areaObj.regionName = val;
      if(this.cityType=='area'){
        this.addressName=val2;
      }else{
        this.addressName=val;
      }
      this.areaObj.showAddressPicker = !this.areaObj.showAddressPicker
    },
    hidePicker(){
      this.areaObj.showAddressPicker = false
    },
    getAddressData(){
      let url = '';//地址数据url
      let that = this;
      api.get(url).then(function (res) {
        let vo = res.data;
        if (vo.code === 0) {
          that.areaObj.regionData = vo.data;
          console.log(that.areaObj.regionData)
        }
      }).catch(function (error) {
        Indicator.close();
        console.log(error.msg);
      });
    }
  }
}
</script>