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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
我的论坛源代码(六)
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
javascript call和apply方法
2008/11/24 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
innerText 使用示例
2014/01/23 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python中web框架的自定义创建
2019/09/08 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python 实现波浪滤镜特效
2020/12/02 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
导游词300字
2015/02/13 职场文书
美容院管理规章制度
2015/08/05 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript