初学Vue2，这个功能整整花了2天时间才搞定，github翻了一堆demo都没找到想要的，最终还是自己写了...

### 1、新建一个region.vue子组件，写入以下代码
```
<template>
  <div id="app">
    <div class="mask" @click="selectaddress"></div>
    <div class="clearfix linkage">
      <div class="picker-toolbar">
        <span class="mint-datetime-action mint-datetime-cancel" @click="cancleaddress">取消</span>
        <span class="mint-datetime-action mint-datetime-cancel mini-title">选择投保城市</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="selectaddress">确定</span>
      </div>
      <mt-picker :slots="slots" value-key="name" @change="onValuesChange"></mt-picker> 
      
    </div>
    </div>
  </div>
</template>

const province = '广东';
const city     = '潮州';
const area     = '潮安区';

export default {
  computed: {
    result() {
      return {
        province           : this.yes_province.name,               // 省
        city               : this.yes_city.name,                   // 市
        area               : this.yes_area.name,                   // 区
        code               : this.yes_area.code,                   // 最后一个选择器的城市编码
        id                 : this.yes_area.id,                     // 最后一个选择器的城市ID
        province_car_prefix: this.yes_province.car_prefix,         // 省级车牌前缀
        city_car_prefix    : this.yes_city.car_prefix.substr(1),   // 市级车牌前缀
        showLinkage        : false                                 // 关闭选择器
      }
    }
  },
  data() {
    return {
      yes_province:{name:'',id:'',id:'',car_prefix:''},
      yes_city:{name:'',id:'',id:'',car_prefix:''},
      yes_area:{name:'',id:'',id:'',car_prefix:''},
      province:{name:'',id:'',id:'',car_prefix:''},
      city:{name:'',id:'',id:'',car_prefix:''},
      area:{name:'',id:'',id:'',car_prefix:''},
      myAdress:null,
      flag : false, // 用于初始化参数
      slots: [
          {
            flex: 1,
            values: address,
            defaultIndex:0,
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: address[0].childs,
            defaultIndex:0,
            className: 'slot3',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot4'
          }, {
            flex: 1,
            values: address[0].childs[0].childs,
            defaultIndex:0,
            className: 'slot5',
            textAlign: 'center'
          }
      ]
    };
  },
  methods:{
    // 隐藏选择器
    cancleaddress: function () {
      this.$emit('getLinkage', this.result);
    },
    // 确认选择
    selectaddress: function () {
      // 触发父组件的getLinkage事件接收结果数据
      this.yes_province = this.province;
      this.yes_city = this.city;
      this.yes_area = this.area;
      this.$emit('getLinkage', this.result);
    },
    // 初始化数据
    runData: function () {
      // 赋默认值
      let city_array = '';
      let area_array = '';

// 处理省级
      address.forEach((item, index)=>{
        if(item.name === province){
          console.log(item.name);
          // 选择省级默认值
          this.slots[0].defaultIndex = index;
          // 设置市级数据
          this.slots[2].values = address[index].childs;
          city_array = address[index].childs;
          this.province = item;
        }
      });

// 处理市级
      city_array.forEach((item, index)=>{
        if(item.name === city){
          console.log(item.name);
          // 选择市级默认值
          this.slots[2].defaultIndex = index;
          // 设置区级数据
          this.slots[4].values = city_array[index].childs;
          area_array = city_array[index].childs;
          this.city = item;
        }
      });

// 处理区级
      area_array.forEach((item, index)=>{
        if(item.name === area){
          console.log(item.name);
          // 选择区级默认值
          this.slots[4].defaultIndex = index;
          this.area = item;
        }
      });
      // 第一次要返回默认值
      this.selectaddress();
    },
    onValuesChange(picker, values) { 
        picker.setSlotValues(1, values[0].childs);
        let town = [];
        if(values[1]){
          town = values[1].childs;
        }
        picker.setSlotValues(2,town);
        
        if(this.flag == false){
          this.flag = true;
          this.runData();  
        } else {
          // 设置被选中的值
          let array = picker.getValues();
          // 循环中处理选中参数
          array.forEach((item, index)=>{
            // 省
            if (index == 0) {
              this.province = item;
            // 市  
            } else if (index == 1) {
              this.city = item;
            // 区
            } else if (index == 2) {
              this.area = item;
            }
          });
        }
    }
  }
}
</script>

### 2、新建一个Test.vue父组件，写入以下代码：
```
<template>
  <div id="app">
    <transition name="fade">
      <region @getLinkage='_showChildMsg' v-show="showLinkage"></region>
    </transition>
    <p v-html="region_name" class="getCity" @click="_showLinkage"></p>
    <p v-html="region_id" class="getCity" ></p>
    <p v-html="region_code" class="getCity" ></p>
    <p v-html="region_car_prefix" class="getCity" ></p>
  </div>
</template>

export default {
  data(){
    return{
      // 默认情况下地区子组件是隐藏的
      showLinkage:false,
      // 地区名
      region_name:'',
      // 地区ID
      region_id:'',
      // 地区代码
      region_code:'',
      // 车牌前缀
      region_car_prefix:''
    }
  },
  // 注册子组件
  components:{
    'region':Region, 
  },
  methods:{
    // 接收地区子组件数据
    _showChildMsg(msg){ 
      this.region_name       = msg.province+msg.city+msg.area
      this.region_id         = msg.id
      this.region_code       = msg.code
      this.region_car_prefix = msg.province_car_prefix + '-' + msg.city_car_prefix
      this.showLinkage       = false
    },
    // 显示地区子组件
    _showLinkage(){
      this.showLinkage = true
    }
  }
}
</script>

### 3、最后是上传我们需要使用到的地区数据文件：
位置在：`/项目目录/api/cityData.js`
具体的数据包可以直接下载，数据库由于项目原因就不分享了。
下载地址：https://vpsbm.com/github/cityData.js

### 4、功能介绍
该demo实现了：
1、地区选择器可以设置默认值
2、子组件初始化时，可以将默认值对应的参数返回给父组件
3、地区选择器带有确认取消按钮。

效果如下图：
![](https://vpsbm.com/public/upload/20181107103931_208.gif)

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺