mint-ui picker 取消确定封装、省市区三级联动、toast 引入自定义图标

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：

            

              


                    
取消

                    
确定

              

            

 

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'

      })