使用Vue2如何实现三级联动
这篇文章主要为大家详细介绍了Vue2仿淘宝实现省市区三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可。(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的。请配合博客再下载此json))。
首先页面显示如下:
然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取)
这个张什么样,以什么形式出现,取决于贵公司的UI需求,我们公司是做成弹出层了。。然后背景色透明,这里为了节省流量,我只截取了一段,最后显示如下:
如果贵公司也跟我们需求一样,希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式:
<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=""> <p style="clear: both"></p> </section> </section> <!-- 居住地址三级联动选项 --> <section class="showChose" v-show="showChose"> <section class="address"> <section class="title"> <h4>居住地址</h4> <span @click="closeAdd()">×</span> </section> <section class="title"> <p class="area" @click="provinceSelected()"> {{Province?Province:info[province-1].name}} </p> <p class="area" @click="citySelected()" :class="City?'':'active'"> {{City?City:'请选择'}} </p> <p class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City"> {{District?District:'请选择'}} </p> </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://download.csdn.net/detail/zhaohaixin0418/9862255。 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>
这样就完成了一个省市区的三级联动。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是使用Vue2如何实现三级联动的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
