vue移动端城市三级联动组件使用详解


Posted in Javascript onJuly 26, 2019

本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下

先看效果图

vue移动端城市三级联动组件使用详解

以下组件代码

<template>
 <div class="address">
  <div class="addressboxbg" @click="cancel"></div>
  <div class="addressbox">
   <p class="text_btn"><span style="float:left;" @click="cancel">取消</span><span style="float:right;color:#107E52;" @click="complete">完成</span></p>
   <div class="addressSelect" >
    <div class="selectbox"></div>
    <ul @touchstart="touchStart($event,'province')" @touchmove="touchMove($event,'province')" @touchend="touchEnd($event,'province')" :style="provinceStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list" :class="[{'addSelectActive':index == provinceIndex}]" :key="index">{{item.name}}</li>
    </ul>
    <ul @touchstart="touchStart($event,'city')" @touchmove="touchMove($event,'city')" @touchend="touchEnd($event,'city')" :style="cityStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list2" :class="[{'addSelectActive':index == cityIndex}]" :key="index">{{item.name}}</li>
    </ul>
    <ul @touchstart="touchStart($event,'district')" @touchmove="touchMove($event,'district')" @touchend="touchEnd($event,'district')" :style="districtStyle" :class="[{'selectAni':addSelect}]">
     <li v-for="(item,index) in list3" :class="[{'addSelectActive':index == districtIndex}]" :key="index" >{{item.name}}</li>
    </ul>
   </div>
  </div>
 </div>
</template>
 
<script>
export default {
 data () {
  return {
   list: [],
   list2: [],
   list3: [],
   provinceStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   cityStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   districtStyle: {
    WebkitTransform: 'translate3d(0px,0px,0px)'
   },
   startTop: 0,
   provinceIndex: 0,
   cityIndex: 0,
   districtIndex: 0,
   translateY: 0,
   maxScroll: 0,
   addHeight: 0,
   addSelect: false,
   provinceVal: '',
   cityVal: '',
   areaVal: '',
   val: {
    'provinceVal': '',
    'cityVal': '',
    'areaVal': ''
   }
  }
 },
 watch: {
  // 监听省滑动
  provinceVal (value) {
   this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
    if (res.code === 1) {
     this.list2 = res.data.length > 1 ? res.data : [{name: '-'}]
     if (res.data.length < 1) {
      this.list3 = [{name: '-'}]
     }
     this.cityVal = this.list2[0].value
    }
   })
  },
  // 监听市滑动
  cityVal (value) {
   if (value) {
    this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
     if (res.code === 1) {
      this.list3 = res.data.length > 1 ? res.data : [{name: '-'}]
     }
    })
   }
  }
 },
 created () {
  // 初始化数据
  // 拿省的数据
  this.$axiosGet(this.$api.area).then((res) => {
   if (res.code === 1) {
    this.list = res.data
    this.val.provinceVal = this.list[0]
   }
  })
  // 拿市区的数据
  this.$axiosGet(this.$api.area, {parentId: '1'}).then((res) => {
   if (res.code === 1) {
    this.list2 = res.data
    this.val.cityVal = this.list2[0]
   }
  })
  this.val.areaVal = {
   'name': '',
   'value': ''
  }
  // 第一条数据为直辖市 so '-' 符号表示为第三列
  this.list3 = [{name: '-'}]
 },
 methods: {
  // 点击取消
  cancel () {
   this.$emit('cancel', false)
  },
  // 点击完成
  complete () {
   if (!this.val.areaVal.value) {
    this.val.areaVal = {
     'name': '',
     'value': ''
    }
   }
   if (!this.val.cityVal.value) {
    this.val.cityVal = {
     'name': '',
     'value': ''
    }
   }
   this.$emit('complete', this.val)
  },
  // 滑动开始
  touchStart (e, val) {
   e.preventDefault()
   this.addSelect = false
   this.addHeight = e.currentTarget.children[0].offsetHeight
   this.maxScroll = this.addHeight * e.currentTarget.children.length
   this.startTop = e.targetTouches[0].pageY
   switch (val) {
    case 'province':
     this.translateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
     break
    case 'city':
     this.translateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
     break
    case 'district':
     this.translateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
     break
    default:
     break
   }
  },
  // 滑动进行中
  touchMove (e, val) {
   e.preventDefault()
   switch (val) {
    case 'province':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.provinceStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
      this.provinceStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    case 'city':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.cityStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
      this.cityStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.cityStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    case 'district':
     if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
      this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
      this.districtStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
     } else {
      this.districtStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
     }
     break
    default:
     break
   }
  },
  // 滑动结束
  touchEnd (e, val) {
   e.preventDefault()
   this.addSelect = true
   switch (val) {
    case 'province':
     let provinceTranslateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
     this.provinceIndex = -Math.round(provinceTranslateY / this.addHeight)
     this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(provinceTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
     this.cityStyle.WebkitTransform = this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     this.cityIndex = this.districtIndex = 0
     break
    case 'city':
     let cityTranslateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
     this.cityIndex = -Math.round(cityTranslateY / this.addHeight)
     this.cityStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(cityTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
     this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
     this.districtIndex = 0
     break
    case 'district':
     let districtTranslateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
     this.districtIndex = -Math.round(districtTranslateY / this.addHeight)
     this.districtStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(districtTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
     break
    default:
     break
   }
   // 滑动结束后 处理数据
   this.dataProcessing()
  },
  // 数据处理
  dataProcessing () {
   // 滑动数据传输 数据处理
   this.val.provinceVal = this.list[this.provinceIndex]
   this.provinceVal = this.list[this.provinceIndex].value
   this.val.cityVal = this.list2[this.cityIndex]
   this.cityVal = this.list2[this.cityIndex].value
   this.val.areaVal = this.list3[this.districtIndex]
   this.areaVal = this.list3[this.districtIndex].value
   // this.val.cityVal = this.addressData[this.provinceIndex].city[this.cityIndex].name
   // this.val.areaVal = this.addressData[this.provinceIndex].city[this.cityIndex].area[this.districtIndex]
   // this.$emit('getAddress', this.val)
   // this.test([this.val.provinceVal, this.cityIndex, this.districtIndex])
  }
 }
}
</script>
 
<style>
.address{
 position:absolute;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}
.address .addressbox{
 height: 40%;
 position: absolute;
 z-index: 101;
 width: 100%;
 max-height: 100%;
 overflow: hidden;
 background: #fff;
 bottom: 0px;
}
.address .addressbox .text_btn{
 height: 30px;
 font-size: 14px;
 line-height: 30px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 padding: 0 10px;
 background: #F9F9F9;
}
.addressSelect .selectbox{
 width: 100%;
 height: 26px;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin-top: 60px;
 background: #F9F9F9;
}
.address .addressboxbg{
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.7);
}
.addressSelect{width: 100%; position: relative; background: #fff; height: 190px;overflow: hidden; -webkit-mask-box-image: linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent); font-size: 14px;}
.addressSelect ul{width: 33.333333%; position: absolute; left: 0; top:60px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; text-align: center; padding-left: 0;}
.addressSelect ul li{white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:rgba(0,0,0,.54); padding: 3px 0;}
.addressSelect ul:nth-of-type(2){left: 33.333333%;}
.addressSelect ul:nth-of-type(3){left: 66.666666%;}
.addressSelect ul li.addSelectActive{color:rgba(0,0,0,.87); transform: scale(1.1); transition: 0.5s;}
.selectAni{transition: 0.8s;}
</style>

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

Javascript 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
layui实现下拉框三级联动
Jul 26 #Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
javascript中的闭包概念与用法实践分析
Jul 26 #Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 #Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 #Javascript
You might like
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python语言中有算法吗
2020/06/16 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
入学证明
2015/06/23 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电