mint-ui picker 取消确定封装、省市区三级联动、to
2019-02-16 本文已影响0人
轩轩小王子
1.Q:vue 结合mint-ui 注意事项
A:main.js 中 一定要引入mint-ui的css,不然mint-ui 组件有些样式显示不出来
import 'mint-ui/lib/style.css'
2.Q:mint-ui picker 组件 封装取消、确定按钮及功能
A：
<mt-popup v-model="regionVisible" position="bottom" class="region-popup">
<mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount="5" @change="addressChange" :itemHeight="40" showToolbar ref="picker">
<div class="picker-btn-wrap">
<div class="picker-cancel" @click="addressChooseCancel">取消</div>
<div class="picker-sure" @click="confirmChoose">确定</div>
</div>
</mt-picker>
</mt-popup>
picker组件的change事件，进行取值赋值
addressChange(picker, values){
if (this.regionInit){
if(this.myAddressSlots[0]){
picker.setSlotValues(1, this.getCityArr(this.twoLevelAddress,values[0]["name"]));
picker.setSlotValues(2, this.getCountyArr(values[0]["name"], values[1]["name"]));
}
}else{
this.regionInit = true;
}
遍历json，返回省级对象数组
getProvinceArr(arr) {
let provinceArr = [];
arr.forEach(function (item) {
let obj = {};
obj.name = item.label;
obj.province_id = item.value;
provinceArr.push(obj);
});
return provinceArr;
},
遍历json，返回市级对象数组
getCityArr(arr,province) {
let cityArr = [];
arr.forEach(function (item) {
if (item.label === province) {
item.children.forEach(function (args) {
let obj = {};
obj.name = args.label;
obj.city_id = args.value;
cityArr.push(obj);
});
}
});
return cityArr;
},
遍历json，返回区级对象数组
getCountyArr(province,city){
let countyArr = [];
this.twoLevelAddress.forEach(function(item){
if (item.label === province){
item.children.forEach(function (args) {
if (args.label === city){
args.children.forEach(function (param) {
let obj = {};
obj.name=param.label;
obj.country_id=param.value;
countyArr.push(obj);
})
}
});
}
});
return countyArr;
},
地区选择器 确定
confirmChoose(){
this.chooseAddress = this.$refs.picker.getValues();
let currentCountryName = this.chooseAddress[2].name;
let currentCountryArr = this.$refs.picker.getSlotValues(2); //这个地方有一个mint-ui picker 组件自身有一个bug 就是 如果河北省 区第一个是市辖区 在切换到 别的省里面如果第一个也是市辖区 ，通过 this.chooseAddress = this.$refs.picker.getValues(); 获取到的区id 是不更新的
let currentCountryId=""
currentCountryArr.forEach(v=>{
if(v.name == currentCountryName){
currentCountryId = v.country_id;
}
})
this.currentCountryId = currentCountryId;
this.enterpriseAddressDes = this.chooseAddress[0].name+'/'+this.chooseAddress[1].name+'/'+this.chooseAddress[2].name;
this.regionVisible = false
},
3.Q:toast 引入自定义图标
A:
Toast({
message:'提交成功',
iconClass:'mint-toast-icon mintui mintui-success'
})
