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 相关文章推荐
JS应用正则表达式转换大小写示例
Sep 18 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
Javascript函数式编程语言
Oct 11 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
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
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php强制下载类型的实现代码
2011/04/21 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
js 页面输出值
2008/11/30 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
python妙用之编码的转换详解
2017/04/21 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
深入浅析Python传值与传址
2018/07/10 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
教师自荐书
2013/10/08 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
蓬莱阁导游词
2015/02/04 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
详解PyTorch模型保存与加载
2022/04/28 Python