vue实现一拉到底的滑动验证


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了vue实现简单的一拉到底的滑动验证的具体代码,供大家参考,具体内容如下

直接上代码

<template>
 <div class="drag" ref="dragDiv">
  <div class="drag_bg"></div>
  <div class="drag_text">{{confirmWords}}</div>
  <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    beginClientX:0,   /*距离屏幕左端距离*/
    mouseMoveStata:false,  /*触发拖动状态 判断*/
    maxwidth:'',    /*拖动最大宽度,依据滑块宽度算出来的*/
    confirmWords:'拖动滑块验证', /*滑块文字*/
    confirmSuccess:false   /*验证成功判断*/
   }
  },
  methods: {
   mousedownFn:function (e) {
    if(!this.confirmSuccess){
     e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
     this.mouseMoveStata = true;
     this.beginClientX = e.clientX;
    }
   },  //mousedoen 事件
   successFunction(){
    this.confirmSuccess = true
    this.confirmWords = '验证通过';
    if(window.addEventListener){
     document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn);
     document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn);
    }else {
     document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{});
    }
    document.getElementsByClassName('drag_text')[0].style.color = '#fff'
    document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
    document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
   },    //验证成功函数
   mouseMoveFn(e){
    if(this.mouseMoveStata){
     let width = e.clientX - this.beginClientX;
     if(width>0 && width<=this.maxwidth){
      document.getElementsByClassName('handler')[0].style.left = width + 'px';
      document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
     }else if(width>this.maxwidth){
      this.successFunction();
     }
    }
   },     //mousemove事件
   moseUpFn(e){
    this.mouseMoveStata = false;
    var width = e.clientX - this.beginClientX;
    if(width<this.maxwidth){
     document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
     document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
    }
   }      //mouseup事件
  },
  mounted(){
   this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
   document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn);
   document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
  }
 }
</script>

<style scoped>
 .drag{
  position: relative;
  background-color: #e8e8e8;
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-align: center;
 }
 .handler{
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: move;
 }
 .handler_bg{
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
 }
 .handler_ok_bg{
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
 }
 .drag_bg{
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
 }
 .drag_text{
  position: absolute;
  top: 0px;
  width: 100%;text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select:none;
  -ms-user-select:none;
 }
</style>

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

Javascript 相关文章推荐
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
全面了解js中的script标签
Jul 04 Javascript
js实现日历与定时器
Feb 22 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
微信小程序绘制图片发送朋友圈
Jul 25 #Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
You might like
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
你应该知道的python列表去重方法
2017/01/17 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
小学生评语大全
2014/04/18 职场文书
关于青春的演讲稿
2014/05/05 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
大国崛起日本观后感
2015/06/02 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android