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 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
15分钟上手vue3.0(小结)
May 20 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
php error_log 函数的使用
2009/04/13 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
vue实现按钮切换图片
2021/01/20 Vue.js
Python异常处理总结
2014/08/15 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python编程线性回归代码示例
2017/12/07 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
详解Python 切片语法
2019/06/10 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python中的面向接口编程示例详解
2021/01/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
super关键字的用法
2012/04/10 面试题
店长助理岗位职责
2013/12/13 职场文书
保安公司服务承诺书
2014/05/28 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python