vue-cli3项目使用mint-ui 利用popup结合picker实现省市联动封装组件......

    最近项目上线部署完毕闲着没事， 感觉mint-ui里面的picker组件和自己的需求有冲突，所以就基于它自己封装了一个省市联动组件！

1：父组件调用子组件的地方

注册组件什么的就不说了 

[code]<mt-button type="primary" size="small" @click="getcode()">选择地址</mt-button>

地址是：{{Provin}} --- {{city}}

<Pockers
:Province="Province" ref="Pocker"
v-on:childByValue="childByValue">
</Pockers>

Province  //传给组件的json数据  

v-on:childByValue  //获取子组件返回的最终选择地址

附上methods里面的两个方法

[code]methods:{
childByValue: function (Provin,city) {//实时监测子组件传递过来的数据
this.Provin = Provin;
this.city = city;
},
getcode(){
this.$refs.Pocker.popupVisible = true;
},
},

2:子组件代码 Picker

[code]<template>
<div>
<mt-popup v-model="popupVisible" position="bottom"  >
<mt-picker :slots="slots" @change="onValuesChange" :visibleItemCount="5" showToolbar>
<div class="picker-toolbar-title">
                        <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
                        <div class="">请选择城市</div>
                        <div class="usi-btn-sure" @click="popupVisible = !popupVisible">确定</div>
                    </div>
</mt-picker>
</mt-popup>
</div>
</template>
<script>
export default {
props:['Province'],//父组件传递过来的组件数据
data(){
return{
popupVisible:false,//控制弹窗是否显示  这里是自下而上的方向
slots: [
{
flex: 1,
values:this.Provincelist(), //省份数组
className: 'slot1',
textAlign: 'left'
},
           //分隔符
{
divider: true,
content: '--',
className: 'slot2'
},
          //市
{
flex: 1,
values:this.cities('河北省'),
className: 'slot3',
textAlign: 'right'
}
],
Provin:'',//省份
city:'',//市区
}
},
methods:{
onValuesChange(picker, values) {//当滑动内容发生改变的时候
if(this.popupVisible){
picker.setSlotValues(1, this.cities(values[0]));
this.Provin = values[0]
this.city = values[1]
this.$emit('childByValue', this.Provin,this.city)//实时返回最新值给父组件
}
},
Provincelist(){//省份
let list = []
this.Province.provinces.forEach(item => {
list.push(item.provinceName)
});
return list
},
cities(provinceArray){//市区
let cityArr  = []
this.Province.provinces.forEach(item =>{
if(item.provinceName === provinceArray){
item.citys.forEach(ages =>{
cityArr.push(ages.citysName)
})
}
})
return cityArr
}
},
mounted(){}
}
</script>
<style lang="less" scoped>
.mint-popup-bottom {
width:100%;
background:blanchedalmond;
}
.picker-toolbar-title {
display: flex;
flex-direction: row;
justify-content: space-around;
height: .4rem;
line-height: .4rem;
font-size: .16rem;
}
.usi-btn-cancel,
.usi-btn-sure {
color: #FF6600
}
</style>

如有不对之处，请各位大佬指正....