用Vue2仿京东省市区三级联动效果

三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动 ，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下

首先页面显示如下：

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' : ''">{{v.name}}li> <li class="addList" v-for="(v,k) in showDistrictList" @click="getDistrictId(v.id, v.name, k)" v-show="showDistrict" :class="v.selected ? 'active' : ''">{{v.name}}li> ul> section> section> <section class="cont"> <span>详细地址：span> <input type="text" v-model="address" placeholder=" 请填写详细地址"> section> section> template> <script> import { mapActions, mapGetters } from 'vuex'; import api from './../../fetch/api.js' export default { name: 'address', data(){},此处的data直接下载json复制进去即可。http://www.cnblogs.com/lguow/p/9272563.html components: { MineHeader }, computed: { ...mapGetters([ 'BCcontextPathSrc', 'sessionId', 'token', ]), }, methods: { choseAdd: function() { this.showChose = true; }, closeAdd: function() { this.showChose = false; }, _filter(add, name, code) { let result = []; for (let i = 0; i < add.length; i++) { if (code == add[i].id) { result = add[i][name]; } } return result; }, getProvinceId: function(code, input, index) { this.province = code; this.Province = input; this.showProvince = false; this.showCity = true; this.showDistrict = false; this.showCityList = this._filter(this.info, 'city', this.province); // 点击选择当前 this.info.map(a => a.selected = false); this.info[index].selected = true; this.areaProvince = input; }, provinceSelected: function() { // 清除市级和区级列表 this.showCityList = false; this.showDistrictList = false; // 清除市级和区级选项 this.City = false; this.District = false; // 选项页面的切换 this.showProvince = true; this.showCity = false; this.showDistrict = false; }, getCityId: function(code, input, index) { this.city = code; this.City = input; this.showProvince = false; this.showCity = false; this.showDistrict = true; this.showDistrictList = this._filter(this.showCityList, 'district', this.city); // 选择当前添加active this.showCityList.map(a => a.selected = false); this.showCityList[index].selected = true; this.areaCity = input; }, citySelected: function() { this.showProvince = false; this.showCity = true; this.showDistrict = false; }, getDistrictId: function(code, input, index) { this.district = code; this.District = input; // 选择当前添加active this.showDistrictList.map(a => a.selected = false); this.showDistrictList[index].selected = true; // 选取市区选项之后关闭弹层 this.showChose = false; this.areaDistrict = input; }, districtSelected: function() { this.showProvince = false; this.showCity = false; this.showDistrict = true; }, saveProfile: function() { api.commonApi('后台接口', 这里是贵公司后台接口，按照你们公司的改了就好 'param_key={"head":{"TYPE":"ADD_UPD_INFO",' + '"SESSION_ID":"' + this.sessionId + '",' + '"TOKEN":"' + this.token + '","DEVICE_ID":""},' + '"param":{"PROVINCE":"' + this.areaProvince + '", ' + '"CITY":"' + this.areaCity + '", "COUNTY":"' + this.areaDistrict + '",' + '"ADDRESS": "' + this.address + '"}}') .then(res => { console.log(res.data); }); } } } script> <style scoped> .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; } style>