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 相关文章推荐
cookie中的path与domain属性详解
Dec 18 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 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
关于crontab的使用详解
2013/06/24 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
javascript关于继承解析
2016/05/10 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
简单实现python聊天程序
2018/04/01 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
精灵市场:Pixie Market
2019/06/18 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
车间操作工岗位职责
2013/12/19 职场文书
优秀实习生感言
2014/03/01 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
高中班主任评语大全
2014/04/25 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python列表的索引与切片
2022/04/07 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis