这篇文章主要为大家详细介绍了vue移动端城市三级联动组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue移动端城市三级联动组件的具体代码，供大家参考，具体内容如下
先看效果图
以下组件代码
<div class="address"> <div class="addressboxbg"></div><div class="addressbox"> <p class="text_btn"><span style="float:left">取消</span><span style="float:right;color:#107E52">完成</span></p><div class="addressSelect"> <div class="selectbox"></div><ul> <li>{{item.name}}</li></ul><ul> <li>{{item.name}}</li></ul><ul> <li>{{item.name}}</li></ul></div></div></div> .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;<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i> 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;}
以上就是vue移动端城市三级联动组件使用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue移动端城市三级联动组件使用详解
转载请注明原文链接：vue移动端城市三级联动组件使用详解
