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 相关文章推荐
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
详解vue添加删除元素的方法
2018/06/30 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python实现简单中文词频统计示例
2017/11/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python类反射机制使用实例解析
2019/12/30 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python dumps和loads区别详解
2020/02/04 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
主管职责范文
2013/11/09 职场文书
户籍证明的格式
2014/01/13 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
保护环境倡议书500字
2014/05/19 职场文书
政风行风自查自纠报告
2014/10/21 职场文书