三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:http://download.csdn.net/detail/zhaohaixin0418/9862255。
首先页面显示如下:
然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取)
这个张什么样,以什么形式出现,取决于贵公司的UI需求,我们公司是做成弹出层了。。然后背景色透明,这里为了节省流量,我只截取了一段,最后显示如下:
如果贵公司也跟我们需求一样,希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式:
<template> <section class="myAddress"> <section> <section class="cont" @click="choseAdd()"> <section> <span>所在地区:{ { Province?Province:''}} { { City?City:''}} { { District?District:''}}</span> </section> <img src="../../assets/main/right.png" alt=""> <div style="clear: both"></div> </section> </section> <!-- 居住地址三级联动选项 --> <section class="showChose" v-show="showChose"> <section class="address"> <section class="title"> <h4>居住地址</h4> <span @click="closeAdd()">×</span> </section> <section class="title"> <div class="area" @click="provinceSelected()"> { { Province?Province:info[province-1].name}} </div> <div class="area" @click="citySelected()" :class="City?'':'active'"> { { City?City:'请选择'}} </div> <div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City"> { { District?District:'请选择'}} </div> </section> <ul> <li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id, v.name, k)" v-show="showProvince" :class="v.selected ? 'active' : ''">{ { v.name}}</li> <li class="addList" v-for="(v,k) in showCityList" @click="getCityId(v.id, v.name, k)" v-show="showCity" :class="v.selected ? 'active' : ''">