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获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
javascript初学者常用技巧
Sep 02 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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配置文件中最常用四个ini函数
2007/03/19 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
JS实现上传图片实时预览功能
2017/05/22 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python扩展内置类型详解
2018/03/26 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Django model反向关联名称的方法
2018/12/15 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
法人授权委托书格式
2014/04/08 职场文书
技校毕业生自荐书
2014/05/23 职场文书
小学教师培训方案
2014/06/09 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
元宵节晚会主持词
2015/07/01 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python