vue结合android,mint中popup和picker实现省市区三级联动

template:

//触发事件
通讯住址: {{provinceName}}-{{cityName}}-{{countyName}} 请选择

    
确认

data:

//省
myAddressSlots1: [{
    flex: 1,
    values: [{
        name: "北京市",
        id: "1"
    }], //省份数组
    textAlign: 'center'
}],
//市
myAddressSlots2: [{
    flex: 1,
    values: [{
        name: "[请选择]",
        id: "1"
    }, ],
    textAlign: 'center'
}],
//县
myAddressSlots3: [{
    flex: 1,
    values: [{
        name: "[请选择]",
        id: "1"
    }],
    textAlign: 'center'
}],

watch:

//通过监听制造箭头动画
        watch: {
            funding() {
                if (this.funding) {
                    this.$refs.arrow.style.transform = "rotate(-270deg)"
                } else {
                    this.$refs.arrow.style.transform = "rotate(-90deg)"
                }
            },
            regionVisible() {
                if (this.regionVisible) {
                    this.$refs.arrow1.style.transform = "rotate(-270deg)"
                } else {
                    this.$refs.arrow1.style.transform = "rotate(-90deg)"
                }
            },
        },

created:

//和android交互拿到数据
            this.province = $App.getProvinceList()
            this.province = JSON.parse(this.province)
            this.myAddressSlots1[0].values = this.province;

methods:

            addressChange1(msg, value) {
                this.provinceId = value[0].id;
                this.provinceName = value[0].name;
                this.city = $App.getCityList(this.provinceId);
                this.city = JSON.parse(this.city);
                this.myAddressSlots2[0].values = this.city;
            },
            addressChange2(msg, value) {
                this.cityId = value[0].id;
                this.cityName = value[0].name;
                this.county = $App.getCountryList(this.cityId);
                this.county = JSON.parse(this.county);
                this.county.unshift({
                    name: "[请选择]",
                    id: 0
                })
                this.myAddressSlots3[0].values = this.county;
            },
            addressChange3(msg, value) {
                this.countyId = value[0].id;
                this.countyName = value[0].name;
            },

style:


你可能感兴趣的:(mintUI,vue,android)