vue-cli 自定义指令directive 添加验证滑块

欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640

----------------------------------------------------------

                  转载文章请注明出处！               

----------------------------------------------------------

预览地址：https://jsfiddle.net/wangzhichao/dx9yf20w/

gif截图软件帧数略低。。。。

vue项目注册登录页面遇到了一个需要滑块的功能，网上看了很多插件发现都不太好用，于是自己写了一个插件供大家参考；

用的是vue的自定义指令direcive，只需要在需要的组件里放入对应的标签嵌套即可；

template：

 1   <template>
 2 <div>
 3 <div class="movebox" >
 4                 <div class="movego"></div>
 5                 <div class="txt" id="txt">拖动滑块验证</div>
 6                 <div class="move moveBefore" v-move></div>
 7  </div>
 8 <div class="movebox" >
 9                 <div class="movego"></div>
10                 <div class="txt" id="txt">拖动滑块验证</div>
11                 <div class="move moveBefore" v-move></div>
12  </div>
13 </div>
14 </template>

 项目中使用的是scss；

css代码：

 1 <style lang="scss" scoped>
 2 
 3 
 4 .movebox{
 5     position: relative;
 6     background-color: #e8e8e8;
 7     width: 300px;
 8     height: 34px;
 9     line-height: 34px;
10     text-align: center;
11     .txt{
12     position: absolute;
13     top: 0px;
14     width: 300px;
15     -moz-user-select: none;
16     -webkit-user-select: none;
17     user-select: none;
18     -o-user-select: none;
19     -ms-user-select: none;
20     }
21     .movego{
22       background-color: #7ac23c;
23       height: 34px;
24       width: 0px;
25     }
26       .move{
27         position: absolute;
28     top: 0px;
29     left: 0px;
30     width: 40px;
31     height: 34px;
32     border: 1px solid #ccc;
33     cursor: move;
34       }
35       .moveBefore{
36      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;
37 
38         
39       }
40       .moveSuccess{
41         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;
42 
43         
44       }
45     }
46 </style>

jquery已经在全局引入，需要jquery全局引入的，可以看我的上一篇博客，里面有jquery的引入；

script:

<script>


export default {
  components: {
    
  },
  data() {
    return {        
    }
  },
  mounted() {
   //console.log($('选择器'))
  },
  methods: {
        },
  directives: {
    move(el) {
        el.onmousedown = function(e) {
        var X = e.clientX - el.offsetLeft
        document.onmousemove = function(e) {
            var endx = e.clientX - X
        el.className = 'move moveBefore'
        el.style.left = endx + 'px'
       // console.log(el.parentNode.children[0])
        var width = $('.movebox').width() - $('.move').width()
         el.parentNode.children[0].style.width = endx + 'px'
         el.parentNode.children[1].innerHTML = '拖动滑块验证'
        //临界值小于
        if (endx <= 0) {
        el.style.left = 0 + 'px'
         el.parentNode.children[0].style.width = 0 + 'px'
         //$('.movego').width(0)
        }
        //临界值大于
       // console.log(el.style.left)
        if (parseInt(el.style.left) >= width) {
        el.style.left = width + 'px'
         el.parentNode.children[0].style.width = width + 'px'
         el.parentNode.children[1].innerHTML = '验证通过'
        el.className = 'move moveSuccess'
        el.onmousedown = null
        }
        }
    }
    document.onmouseup = function() {
        document.onmousemove = null
    }
    }
  }
}

</script>

 

 谢了近20分钟，调试好了，效果还是比较可以的：

用的gif制作软件略卡；

 

 

 

 

posted @ 2017-10-19 14:22  王志超II  阅读(4725)  评论(0)  编辑  收藏  举报