Vue2仿淘宝实现省市区三级联动
时间:2019-04-10
本文章向大家介绍Vue2仿淘宝实现省市区三级联动,主要包括Vue2仿淘宝实现省市区三级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可。(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的。请配合博客再下载此json))。
首先页面显示如下:
然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取)
这个张什么样,以什么形式出现,取决于贵公司的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' : ''">{{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>
这样就完成了一个省市区的三级联动。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 利用Meta申明来做百度、谷歌、雅虎、微软等搜索的开放适配
- 【Oracle 12c ASM专题】——我的第一个Flex Diskgroup
- 编写一个go gRPC的服务
- GO语言使用gopsutil包进行机器信息采集
- redigo 连接池代码分析
- golang文件传输服务
- golang使用信号量热更新
- SEO养博客神器:同步文章(或摘要)到新浪博客的WordPress插件
- go如何读取MAC地址或硬盘ID
- SEO分享:让百度删除不想收录的域名或快照的最快方法
- MySQL中server_id一致带来的问题
- SQL复习之使用SQL语句创建数据库
- GO语言的IO方法实例小结
- MySQL5.7并行复制中并行的真正含义
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深度了解特征工程
- Nginx应用场景之虚拟主机
- shell tcping 端口,ping网段所有ip端口或tcping指定IP端口
- Redis | 源码阅读 —— 链表
- Python从入门到熟练(4):基础数据类型
- 【MaskTheFace】给人脸图片戴口罩!
- Python从入门到熟练(5): 数据类型进阶
- Python从入门到熟练(6): 流程控制
- Python包:json扩展包demjson使用
- 【论文解读】无需额外数据、Tricks、架构调整,CMU开源首个将ResNet50精度提升至80%+新方法
- 机器学习模型调参指南(附代码)
- Flink SQL 自定义函数指南 - 以读取 GBK 编码的数据库为例
- 光照不均匀图像分割技巧1——分块阈值
- MySQL 8.0新特性 — 不可见索引
- 【小白学PyTorch】9.tensor数据结构与存储结构