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

template:

//触发事件
<div :class="{borBm: borBm == 4}">
    <span>通讯住址：</span>
    <span v-if="countyName && countyName != '[请选择]'" @click="showPopup(1)">{{provinceName}}-{{cityName}}-{{countyName}}</span>
    <!-- <input type="number" v-model="msg4" @click="clickList(4)" placeholder="请输入转账金额"> -->
    <span v-if="!countyName || countyName == '[请选择]'" class="tar" @click="showPopup(1)">请选择<i class="mintui mintui-back" ref="arrow1"></i></span>
</div>

<mt-popup v-model="regionVisible" position="bottom" style="width: 100%">
    <div class="popupTop">
        <span @click="hiddenRegion">确认</span>
    </div>
    <div class="region" style="display: flex">
        <mt-picker :slots="myAddressSlots1" valueKey="name" @change="addressChange1" :itemHeight="40" style="width: 33.33%"></mt-picker>
        <mt-picker :slots="myAddressSlots2" valueKey="name" @change="addressChange2" :itemHeight="40" style="width: 33.33%"></mt-picker>
        <mt-picker :slots="myAddressSlots3" valueKey="name" @change="addressChange3" :itemHeight="40" style="width: 33.33%"></mt-picker>
    </div>
</mt-popup>

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:

<style lang="less" scoped>
    .content {
        .popupTop {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 10px 15px;
            span {
                height: 80%; // background: #39c;
                color: #fff;
                color: #39c;
                padding: 4px 20px;
                /* prettier-ignore */
                border: 1PX solid #39c;
                border-radius: 3px;
            }
        }
        .picker-toolbar {
            span {
                color: #ccc;
                /* prettier-ignore */
                border: 1PX solid #ccc;
                transform: translateY(10px);
                padding: 3px 15px;
                font-size: 12px;
                border-radius: 3px;
                &:first-child {
                    float: left;
                    margin-left: 105px;
                }
                &:last-child {
                    color: #39c;
                    /* prettier-ignore */
                    border: 1PX solid #39c;
                    margin-right: 105px;
                    float: right;
                }
            }
        }
        .mint-popup {
            border-top-right-radius: 8px;
            border-top-left-radius: 8px;
        }
        .funding {
            position: relative;
            min-height: 250px;
            padding: 25px 15px 15px; // display: flex;
            // justify-content: space-between;
            // flex-wrap: wrap;
            >div {
                width: 100%;
                height: 40px;
                line-height: 40px;
                /* prettier-ignore */
                border-bottom: 1PX dashed #ccc;
                margin-bottom: 5px;
            }
            i {
                /* prettier-ignore */
                border: 1PX solid #ccc;
                position: absolute;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                top: 9px;
                right: 9px;
                border-radius: 50%;
                color: #ccc;
            }
        }
        .tar {
            position: relative;
            text-align: right;
            color: #555 !important;
            padding-right: 25px;
            box-sizing: border-box;
            i {
                position: absolute;
                right: 0;
                transition: all .3s;
                transform: rotate(-90deg);
                color: #ccc;
            }
        }
        .borBm {
            /* prettier-ignore */
            border-bottom: 1PX solid #4caf50 !important;
        }
        .passWord {
            min-height: 300px;
            div {
                padding: 0 15px;
                &:nth-child(1) {
                    padding-top: 30px;
                    text-align: center;
                    input {
                        width: 250px;
                        /* prettier-ignore */
                        border: 1PX solid #ccc;
                        height: 30px;
                        border-radius: 5px;
                        text-align: center;
                        color: #666;
                    }
                } // &:nth-child(2) {}
                &:nth-child(3) {
                    p {
                        text-indent: 2em;
                    }
                }
            }
        }
        .body {
            padding: 0 15px;
            background: #fff;
            padding-bottom: 15px;
            >p {
                color: #ff00008a;
                text-indent: 2em;
                padding: 30px 0;
            }
            .textarea {
                span {
                    color: #333;
                    font-size: 16px;
                    display: block;
                    margin: 15px 0;
                }
                textarea {
                    box-shadow: 0 0 5px #eee;
                    padding: 5px;
                    width: calc(100% - 10px);
                    /* prettier-ignore */
                    border: 1PX solid #eee;
                    font-size: 14px;
                    outline: none;
                    color: #555; // text-indent: 2em;
                }
            }
            .info {
                div {
                    height: 50px;
                    line-height: 50px;
                    /* prettier-ignore */
                    border-bottom: 1PX solid #eee;
                    overflow: hidden;
                    font-size: 16px;
                    span {
                        float: left;
                        color: #333;
                        &:last-child {
                            float: right;
                            width: 220px;
                        }
                    }
                    input {
                        height: 100%;
                        float: right;
                        width: 220px;
                        &::placeholder {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
</style>