微客导航 » 文章资讯 » vue实现手机端省市区区域选择

vue实现手机端省市区区域选择

2023-08-13 12:44:26 173

本文实例为大家分享了vue实现手机端省市区区域选择的具体代码，供大家参考，具体内容如下

1后端接口获取城市信息

2 先获取省根据用户点击的省获取市

3 再根据用户点击的市获取区

组件代码：






.chooseCity{
width:100%;
height:40px;
text-align:center;
line-height:40px;
border-bottom:1pxsolid#666;
}
.boxcity{
position:absolute;
width:40%;
right:0;
top:0;
height:60%;
z-index:100;
background:#ffffff;
}
.citys{
border-top:1pxsolid#666;
height:100%;
overflow:hidden;
overflow-y:scroll;
background:#ffffff;
}
.province{
height:100%;
}
/*让滚动条不显示*/
.citys::-webkit-scrollbar{
display:none;
}
ul{
margin:0;
padding:0;
}
li{
list-style:none;
margin-top:10px;
}
.chooseTit{
display:flex;
justify-content:space-around;
width:100%;
text-align:center;
background:#448ff7;
}
.chooseTitp{
color:#ffffff;
}
.mask{
position:absolute;
width:100%;
height:100%;
background:black;
opacity:.5;
top:0;
left:0;
z-index:90;
}

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

返回顶部
3162201930
czq8825@qq.com

vue实现手机端省市区区域选择

热门推荐

随机推荐