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


Posted in Javascript onOctober 19, 2017

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

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

template:

<template>
<div>
<div class="movebox" >
        <div class="movego"></div>
        <div class="txt" id="txt">拖动滑块验证</div>
        <div class="move moveBefore" v-move></div>
 </div>
<div class="movebox" >
        <div class="movego"></div>
        <div class="txt" id="txt">拖动滑块验证</div>
        <div class="move moveBefore" v-move></div>
 </div>
</div>
</template>

项目中使用的是scss;

css代码:

<style lang="scss" scoped>


.movebox{
  position: relative;
  background-color: #e8e8e8;
  width: 300px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  .txt{
  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;
  }
  .movego{
   background-color: #7ac23c;
   height: 34px;
   width: 0px;
  }
   .move{
    position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 34px;
  border: 1px solid #ccc;
  cursor: move;
   }
   .moveBefore{
   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;

    
   }
   .moveSuccess{
    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;

    
   }
  }
</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制作软件略卡;

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
用vue设计一个日历表
Dec 03 Vue.js
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 #Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
浅谈Node Inspector 代理实现
Oct 19 #Javascript
AngularJS表单验证功能
Oct 19 #Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 #Javascript
Vue如何从1.0迁移到2.0
Oct 19 #Javascript
You might like
基于mysql的论坛(6)
2006/10/09 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
图片按比例缩放函数
2006/06/26 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python中pygame模块用法实例
2014/10/09 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
单身申明具结书
2015/02/26 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android