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


Posted in Javascript onApril 15, 2020

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

首先页面显示如下:

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

然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取)

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

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

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

如果贵公司也跟我们需求一样,希望这个可以帮到你们。下面是在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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 #Javascript
基于vue2实现上拉加载功能
Nov 28 #Javascript
微信小程序模板和模块化用法实例分析
Nov 28 #Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 #Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 #Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 #Javascript
JavaScript中关于class的调用方法
Nov 28 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
小学生新学期寄语
2014/01/19 职场文书
职业规划实施方案
2014/06/10 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS