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之empty()与remove()区别说明
Sep 10 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
jQuery参数列表集合
Apr 06 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
JavaScript中的宏任务和微任务详情
Nov 27 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
python实现telnet客户端的方法
2015/04/15 Python
Python检测生僻字的实现方法
2016/10/23 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
如何用python写个模板引擎
2021/01/14 Python
艺术设计专业个人求职信范文
2013/12/11 职场文书
初中作文评语大全
2014/04/23 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
迎国庆横幅标语
2014/10/08 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
小学课改工作总结
2015/08/13 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫