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

 更新时间:2018年08月24日 09:58:12   作者:想转行的入门级程序员  
这篇文章给大家介绍了基于vue实现拖动滑块验证功能,代码引用css与js都是线上的,将代码全部复制到一个html中可以直接打开,超级简单,感兴趣的朋友跟随脚本之家小编一起看看吧

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

效果图如下所示:

拖动前

拖动后

代码引用的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没有后台验证步骤),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue父组件通过props如何向子组件传递方法详解

    vue父组件通过props如何向子组件传递方法详解

    在Vue 中,可以使用 props 向子组件传递数据,下面这篇文章主要给大家介绍了关于vue父组件通过props如何向子组件传递方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • Vuex模块化与持久化深入讲解

    Vuex模块化与持久化深入讲解

    在实际项目开发过程中,如果公共数据比较多我们会使用vuex做公共状态管理,但是在对浏览器进行刷新操作的时候,会导致vuex内的数据丢失,这种情况有些时候是没问题的,但是有的时候我们需要某些数据可以持久化的保存,这样就需要做对应的处理
    2023-01-01
  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    vscode 配置vue+vetur+eslint+prettier自动格式化功能

    这篇文章主要介绍了vscode 配置vue+vetur+eslint+prettier自动格式化功能,本文通过实例代码图文的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 浅析vue插槽和作用域插槽的理解

    浅析vue插槽和作用域插槽的理解

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
    2019-04-04
  • vue使用Swiper踩坑解决避坑

    vue使用Swiper踩坑解决避坑

    这篇文章主要为大家介绍了vue使用Swiper踩坑及解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • VUE 动态组件的应用案例分析

    VUE 动态组件的应用案例分析

    这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • vue 防止页面加载时看到花括号的解决操作

    vue 防止页面加载时看到花括号的解决操作

    这篇文章主要介绍了vue 防止页面加载时看到花括号的解决操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 解决vue单页面应用进入页面加载所有 js 的问题

    解决vue单页面应用进入页面加载所有 js 的问题

    这篇文章主要介绍了解决vue单页面应用进入页面加载所有 js 的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 深入探讨Vue计算属性与监听器的区别和用途

    深入探讨Vue计算属性与监听器的区别和用途

    在Vue的开发中,计算属性(Computed Properties)和监听器(Watchers)是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
    2023-09-09
  • vue复合组件实现注册表单功能

    vue复合组件实现注册表单功能

    这篇文章主要为大家详细介绍了vue复合组件实现注册表单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论