Vue2仿淘宝实现省市区三级联动

三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动 ，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下：vue.json(这个直接是个data，放入你的vue2项目中即可。（因为我的项目是用的vue2，所以，其他的属性跟博客内容是吻合的。请配合博客再下载此json）)。

首先页面显示如下：

然后我们县级所在地区会出现三级联动，如下：（以下是片段，背景色未截取）

这个张什么样，以什么形式出现，取决于贵公司的UI需求，我们公司是做成弹出层了。。然后背景色透明，这里为了节省流量，我只截取了一段，最后显示如下：

如果贵公司也跟我们需求一样，希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式：
.myAddress { width: 100%; background-color: white; border-top: 4px solid rgba(245, 245, 245, 1); color: #333; } .myAddress .cont { border-bottom: 1px solid rgba(245, 245, 245, 0.8); } .myAddress .cont span { display: inline-block; font-size: 0.28rem; color: #333; line-height: 0.88rem; margin-left: 0.32rem; } .myAddress .cont section { float: left; } .myAddress .cont img { float: right; width: 0.14rem; height: 0.24rem; margin: 0.32rem 0.32rem 0.32rem 0; } .showChose { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 120; background: rgba(77, 82, 113, 0.8); } .address { position: absolute; bottom: 0; left: 0; z-index: 121; background: #fff; width: 100%; } .title h4 { display: inline-block; margin-left: 3.2rem; font-size: 0.32rem; line-height: 0.88rem; font-weight: normal; color: #999; } .title span { margin: 0.42rem 0 0 2.2rem; font-size: 0.45rem; line-height: 0.34rem; color: #D8D8D8; } .area { display: inline-block; font-size: 0.24rem; line-height: 0.88rem; margin-left: 0.42rem; color: #333; } .addList { padding-left: 0.32rem; font-size: 0.34rem; line-height: 0.88rem; color: #333; } .address ul { height: 100%; margin-left: 5%; max-height: 4.4rem; overflow: auto; } .address .title .active { color: #0071B8; border-bottom: 0.02rem solid #0071B8; } .address ul .active { color: #0071B8; }

这样就完成了一个省市区的三级联动。

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