vue移动端城市三级联动组件使用详解

本文实例为大家分享了vue移动端城市三级联动组件的具体代码，供大家参考，具体内容如下

先看效果图

以下组件代码

 

 

.address{
 position:absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.address .addressbox{
 height: 40%;
 position: absolute;
 z-index: 101;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 background: #fff;
 bottom: 0px;
}
.address .addressbox .text_btn{
 height: 30px;
 font-size: 14px;
 line-height: 30px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 padding: 0 10px;
 background: #F9F9F9;
}
.addressSelect .selectbox{
 width: 100%;
 height: 26px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin-top: 60px;
 background: #F9F9F9;
}
.address .addressboxbg{
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.7);
}
.addressSelect{width: 100%; position: relative; background: #fff; height: 190px;overflow: hidden; -webkit-mask-box-image: linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent); font-size: 14px;}
.addressSelect ul{width: 33.333333%; position: absolute; left: 0; top:60px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; text-align: center; padding-left: 0;}
.addressSelect ul li{white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:rgba(0,0,0,.54); padding: 3px 0;}
.addressSelect ul:nth-of-type(2){left: 33.333333%;}
.addressSelect ul:nth-of-type(3){left: 66.666666%;}
.addressSelect ul li.addSelectActive{color:rgba(0,0,0,.87); transform: scale(1.1); transition: 0.5s;}
.selectAni{transition: 0.8s;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。