Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)


Posted in Javascript onAugust 24, 2018

vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解。

效果图如下所示:

Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

拖动前

Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)

拖动后

代码引用的css与js都是线上的
将代码全部复制到一个html中可以直接打开,极其简单。
来分析一下代码
底色div上放了一个变色div再放一个提示字的div最后加一个滑块div
给滑块div绑定鼠标移动事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style scoped>
   .drag {
    border-radius:30px;
    position: relative;
    background-color: #75CDF9;
    width: 300px;
    height: 34px;
    margin-left: 30px;
    margin-top: 100px;
    line-height: 34px;
    text-align: center;
   }
   .handler {
    border-radius:30px;
    position: absolute;
    top: 0px;
    left: 0px;
    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 {
    border-radius:30px;
    background-color: #13CE66;
    height: 34px;
    width: 0px;
   }
   .drag_text {
    position: absolute;
    top: 0px;
    width: 300px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <div class="drag" >
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div @mousedown="mousedownFn($event)" class="handler handler_bg"></div>
   </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script>
   var vm = new Vue({
    el: "#app",
    name: '',
    components: {},
    props: {},
    data() {
     return {
      beginClientX: 0,
      /*距离屏幕左端距离*/
      mouseMoveStata: false,
      /*触发拖动状态 判断*/
      maxwidth: 258,
      /*拖动最大宽度,依据滑块宽度算出来的*/
      confirmWords: '拖动滑块验证',
      /*滑块文字*/
      confirmSuccess: false, /*验证成功判断*/
     }
    },
    created() {},
    watch: {
    },
    methods: {
     mousedownFn: function(e) {
      this.mouseMoveStata = true;
      this.beginClientX = e.clientX;
     }, //按下滑块函数 
     successFunction() {
      $(".handler").removeClass('handler_bg').addClass('handler_ok_bg');
      this.confirmWords = '验证通过'
      $(".drag").css({
       'color': '#fff'
      });
      $(".drag").css({
       'background-color': '#13CE66'
      });
      $(".handler").css({
       'left': this.maxwidth
      });
      $(".drag_bg").css({
       'width': this.maxwidth
      });
      $('body').unbind('mousemove');
      $('body').unbind('mouseup');
      this.confirmSuccess = true;
     } //验证成功函数 
    },
    mounted() {
     $('body').on('mousemove', (e) => {
      //拖动,这里需要用箭头函数,不然this的指向不会是vue对象 
      if(this.mouseMoveStata) {
       var width = e.clientX - this.beginClientX;
       if(width > 0 && width <= this.maxwidth) {
        $(".handler").css({
         'left': width
        });
        $(".drag_bg").css({
         'width': width
        });
       } else if(width > this.maxwidth) {
        this.successFunction();
       }
      }
     });
     $('body').on('mouseup', (e) => {
      //鼠标放开 
      this.mouseMoveStata = false;
      var width = e.clientX - this.beginClientX;
      if(width < this.maxwidth) {
       $(".handler").css({
        'left': 0
       });
       $(".drag_bg").css({
        'width': 0
       });
      }
     })
    }
   });
  </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js常用代码段整理
Nov 30 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript中的继承之类继承
May 01 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 #Javascript
element-ui表格数据转换的示例代码
Aug 24 #Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
You might like
php include加载文件两种方式效率比较
2010/08/08 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
javascript闭包入门示例
2014/04/30 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Vue多选列表组件深入详解
2021/03/02 Vue.js
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python一行代码实现快速排序的方法
2019/04/30 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python里反向传播算法详解
2020/11/22 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
大学生党员个人总结
2015/02/13 职场文书
复试通知单模板
2015/04/24 职场文书
初中同学会致辞
2015/08/01 职场文书
财产分割协议书
2016/03/22 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
小程序实现侧滑删除功能
2022/06/25 Javascript
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL