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

1、新建一个region.vue子组件，写入以下代码

  1. <template>
  2.   <div id="app">
  3.     <div class="mask" @click="selectaddress"></div>
  4.     <div class="clearfix linkage">
  5.       <div class="picker-toolbar">
  6.         <span class="mint-datetime-action mint-datetime-cancel" @click="cancleaddress">取消</span>
  7.         <span class="mint-datetime-action mint-datetime-cancel mini-title">选择投保城市</span>
  8.         <span class="mint-datetime-action mint-datetime-confirm" @click="selectaddress">确定</span>
  9.       </div>
  10.       <mt-picker :slots="slots" value-key="name" @change="onValuesChange"></mt-picker> 
  12.     </div>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. import {address} from '../../api/cityData'  //引入cityData数据
  20. const province = '广东';
  21. const city     = '潮州';
  22. const area     = '潮安区';
  24. export default {
  25.   computed: {
  26.     result() {
  27.       return {
  28.         province           : this.yes_province.name,               // 省
  29.         city               : this.yes_city.name,                   // 市
  30.         area               : this.yes_area.name,                   // 区
  31.         code               : this.yes_area.code,                   // 最后一个选择器的城市编码
  32.         id                 : this.yes_area.id,                     // 最后一个选择器的城市ID
  33.         province_car_prefix: this.yes_province.car_prefix,         // 省级车牌前缀
  34.         city_car_prefix    : this.yes_city.car_prefix.substr(1),   // 市级车牌前缀
  35.         showLinkage        : false                                 // 关闭选择器
  36.       }
  37.     }
  38.   },
  39.   data() {
  40.     return {
  41.       yes_province:{name:'',id:'',id:'',car_prefix:''},
  42.       yes_city:{name:'',id:'',id:'',car_prefix:''},
  43.       yes_area:{name:'',id:'',id:'',car_prefix:''},
  44.       province:{name:'',id:'',id:'',car_prefix:''},
  45.       city:{name:'',id:'',id:'',car_prefix:''},
  46.       area:{name:'',id:'',id:'',car_prefix:''},
  47.       myAdress:null,
  48.       flag : false, // 用于初始化参数
  49.       slots: [
  50.           {
  51.             flex: 1,
  52.             values: address,
  53.             defaultIndex:0,
  54.             className: 'slot1',
  55.             textAlign: 'center'
  56.           }, {
  57.             divider: true,
  58.             content: '-',
  59.             className: 'slot2'
  60.           }, {
  61.             flex: 1,
  62.             values: address[0].childs,
  63.             defaultIndex:0,
  64.             className: 'slot3',
  65.             textAlign: 'center'
  66.           }, {
  67.             divider: true,
  68.             content: '-',
  69.             className: 'slot4'
  70.           }, {
  71.             flex: 1,
  72.             values: address[0].childs[0].childs,
  73.             defaultIndex:0,
  74.             className: 'slot5',
  75.             textAlign: 'center'
  76.           }
  77.       ]
  78.     };
  79.   },
  80.   methods:{
  81.     // 隐藏选择器
  82.     cancleaddress: function () {
  83.       this.$emit('getLinkage', this.result);
  84.     },
  85.     // 确认选择
  86.     selectaddress: function () {
  87.       // 触发父组件的getLinkage事件接收结果数据
  88.       this.yes_province = this.province;
  89.       this.yes_city = this.city;
  90.       this.yes_area = this.area;
  91.       this.$emit('getLinkage', this.result);
  92.     },
  93.     // 初始化数据
  94.     runData: function () {
  95.       // 赋默认值
  96.       let city_array = '';
  97.       let area_array = '';
  99.       // 处理省级
  100.       address.forEach((item, index)=>{
  101.         if(item.name === province){
  102.           console.log(item.name);
  103.           // 选择省级默认值
  104.           this.slots[0].defaultIndex = index;
  105.           // 设置市级数据
  106.           this.slots[2].values = address[index].childs;
  107.           city_array = address[index].childs;
  108.           this.province = item;
  109.         }
  110.       });
  112.       // 处理市级
  113.       city_array.forEach((item, index)=>{
  114.         if(item.name === city){
  115.           console.log(item.name);
  116.           // 选择市级默认值
  117.           this.slots[2].defaultIndex = index;
  118.           // 设置区级数据
  119.           this.slots[4].values = city_array[index].childs;
  120.           area_array = city_array[index].childs;
  121.           this.city = item;
  122.         }
  123.       });
  125.       // 处理区级
  126.       area_array.forEach((item, index)=>{
  127.         if(item.name === area){
  128.           console.log(item.name);
  129.           // 选择区级默认值
  130.           this.slots[4].defaultIndex = index;
  131.           this.area = item;
  132.         }
  133.       });
  134.       // 第一次要返回默认值
  135.       this.selectaddress();
  136.     },
  137.     onValuesChange(picker, values) { 
  138.         picker.setSlotValues(1, values[0].childs);
  139.         let town = [];
  140.         if(values[1]){
  141.           town = values[1].childs;
  142.         }
  143.         picker.setSlotValues(2,town);
  145.         if(this.flag == false){
  146.           this.flag = true;
  147.           this.runData();  
  148.         } else {
  149.           // 设置被选中的值
  150.           let array = picker.getValues();
  151.           // 循环中处理选中参数
  152.           array.forEach((item, index)=>{
  153.             // 省
  154.             if (index == 0) {
  155.               this.province = item;
  156.             // 市  
  157.             } else if (index == 1) {
  158.               this.city = item;
  159.             // 区
  160.             } else if (index == 2) {
  161.               this.area = item;
  162.             }
  163.           });
  164.         }
  165.     }
  166.   }
  167. }
  168. </script>
  170. <style scoped>
  171. .mint-datetime-action{width:32%!important;}
  172. .mini-title{color:#333}
  173. .mask{position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5)}
  174. .linkage{position:fixed;bottom:0;width:100%;background:white;left:0;overflow:hidden}
  175. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  176. .pickerWrapper{width:33.3%;float:left}
  177. </style>

2、新建一个Test.vue父组件，写入以下代码：

  1. <template>
  2.   <div id="app">
  3.     <transition name="fade">
  4.       <region @getLinkage='_showChildMsg' v-show="showLinkage"></region>
  5.     </transition>
  6.     <p v-html="region_name" class="getCity" @click="_showLinkage"></p>
  7.     <p v-html="region_id" class="getCity" ></p>
  8.     <p v-html="region_code" class="getCity" ></p>
  9.     <p v-html="region_car_prefix" class="getCity" ></p>
  10.   </div>
  11. </template>
  13. <script type="text/ecmascript-6">
  14. import Region from './region' // 引入地区组件
  16. export default {
  17.   data(){
  18.     return{
  19.       // 默认情况下地区子组件是隐藏的
  20.       showLinkage:false,
  21.       // 地区名
  22.       region_name:'',
  23.       // 地区ID
  24.       region_id:'',
  25.       // 地区代码
  26.       region_code:'',
  27.       // 车牌前缀
  28.       region_car_prefix:''
  29.     }
  30.   },
  31.   // 注册子组件
  32.   components:{
  33.     'region':Region, 
  34.   },
  35.   methods:{
  36.     // 接收地区子组件数据
  37.     _showChildMsg(msg){ 
  38.       this.region_name       = msg.province+msg.city+msg.area
  39.       this.region_id         = msg.id
  40.       this.region_code       = msg.code
  41.       this.region_car_prefix = msg.province_car_prefix + '-' + msg.city_car_prefix
  42.       this.showLinkage       = false
  43.     },
  44.     // 显示地区子组件
  45.     _showLinkage(){
  46.       this.showLinkage = true
  47.     }
  48.   }
  49. }
  50. </script>
  52. <style scoped>
  53. .getCity{font-size: 20px;}
  54. .fade-enter-active, .fade-leave-active {transition: opacity .5s;}
  55. .fade-enter, .fade-leave-to  {opacity: 0;}
  56. </style>

3、最后是上传我们需要使用到的地区数据文件：

位置在：/项目目录/api/cityData.js
具体的数据包可以直接下载，数据库由于项目原因就不分享了。
下载地址：https://blog.junphp.com/github/cityData.js

4、功能介绍

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

效果如下图：