更新记录

1.0（2020-06-30） 下载此版本

嵌入式联动插件

平台兼容性

嵌入式地区联动插件

在 >template 中引用组件

 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 150px;" :value="value" @change="bindChange">
            <picker-view-column> 
             <view v-for="(item,Index) in provinces" :key="Index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view  v-for="(item,Index) in citys" :key="Index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view   v-for="(item,Index) in areas" :key="Index">{{item}}</view>
            </picker-view-column> 
        </picker-view>

在 >script 中引用组件

   const cityData = require('@/components/gxlcms-area/citydata.json');

    export default {
        data(){
            return {
                    citysData: cityData,
                    provinces: [],
                    citys: [],
                    areas: [],
                    value: [0,0,0],
                    name: '',
                    regionName:false
            }
        },
        onLoad(e){
              this.initData();
              this.sex=e.sex;
        },
        methods:{
            // 获取选择的地区
           initData(){
                   var provinces = [];
                   var citys = [];
                   var areas = [];

                   this.citysData.forEach(function(province,i){
                       provinces.push(province.name);
                       if(i===0){
                           citys.push(province.citys[i].name);
                           areas = province.citys[i].areas;
                       }
                   });

                  this.provinces=provinces;
                  this.citys=citys;
                  this.areas=areas; 

               },

               bindChange(e){
                   var citysData = this.citysData;
                   var value = this.value;
                   var current_value = e.detail.value;
                   var citys = [];
                   var provinceObj = {};
                   var cityObj = {};
                   provinceObj = citysData[current_value[0]];

                   if (value[0] !== current_value[0]) {
                       // 滑动省份
                       provinceObj.citys.forEach(function(v){
                           citys.push(v.name);
                       });

                    this.citys=citys;
                       cityObj = provinceObj.citys[0];

                       this.areas=cityObj.areas;
                       this.value=[current_value[0],0,0];
                   }else if(value[0] === current_value[0] && value[1] !== current_value[1]){
                       // 滑动城市
                       if(current_value[1]>=provinceObj.citys.length){
                           // 数据不存在 跳过
                           return;
                       }
                       cityObj = provinceObj.citys[current_value[1]];
                         this.areas=cityObj.areas;
                         this.value=[current_value[0],current_value[1],0];

                   }else{
                       // 滑动区县
                       cityObj = provinceObj.citys[current_value[1]];
                       this.value=current_value;

                   }
                     this.name=provinceObj.name+'-'+cityObj.name+'-'+cityObj.areas[this.value[2]];
                     this.regionName=true
                    console.log(this.name)
               }

        }
    }