vue拖动滑块验证组件
组件Slider.vue
<template><div class="drag" ref="dragDiv"><div class="drag_bg"></div><div class="drag_text">{{ confirmWords }}</div><div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="border: 0.5px solid #fff;height: 34px;position: absolute;top: 0px;left: 0px;"></div></div>
</template><script>
export default {name: 'Slider',data () {return {beginClientX: 0, /* 距离屏幕左端距离 */mouseMoveStata: false, /* 触发拖动状态 判断 */maxwidth: '', /* 拖动最大宽度,依据滑块宽度算出来的 */confirmWords: '拖动滑块验证', /* 滑块文字 */confirmSuccess: false /* 验证成功判断 */}},methods: {isSuccess () {return this.confirmSuccess},mousedownFn: function (e) {if (!this.confirmSuccess) {e.preventDefault && e.preventDefault() // 阻止文字选中等 浏览器默认事件this.mouseMoveStata = truethis.beginClientX = e.clientX}}, // mousedoen 事件successFunction () {this.confirmSuccess = truethis.confirmWords = '验证通过'if (window.addEventListener) {document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)} else {document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {})}document.getElementsByClassName('drag_text')[0].style.color = '#fff'document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'this.$emit('onSuccess', true)}, // 验证成功函数mouseMoveFn (e) {if (this.mouseMoveStata) {const width = e.clientX - this.beginClientXif (width > 0 && width <= this.maxwidth) {document.getElementsByClassName('handler')[0].style.left = width + 'px'document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'} else if (width > this.maxwidth) {this.successFunction()}}}, // mousemove事件moseUpFn (e) {this.mouseMoveStata = falsevar width = e.clientX - this.beginClientXif (width < this.maxwidth) {// ---- update-begin- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ----const handler = document.getElementsByClassName('handler')[0]if (handler) {handler.style.left = 0 + 'px'document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'}// ---- update-end- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ----}} // mouseup事件},mounted () {this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidthdocument.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)}
}
</script><style scoped>.drag{position: relative;background-color: #e8e8e8;width: 100%;height: 34px;line-height: 34px;text-align: center;}.handler{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{background-color: #7ac23c;height: 34px;width: 0px;}.drag_text{position: absolute;top: 0px;width: 100%;text-align: center;-moz-user-select: none;-webkit-user-select: none;user-select: none;-o-user-select:none;-ms-user-select:none;}
</style>
使用
<template><Slider></Slider>
</template>
<script>
import Sliderfrom '@/components/jeecg/Slider'
export default {components: {Slider},data () {return {}},methods: {}
}
</script>
<style>
</style>
vue拖动滑块验证组件相关推荐
- 拖动滑块验证--vue实现
代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标 ...
- css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码 ...
- 小程序 拖动滑块验证(自定义组件 插件分享)
效果图: 文章目录: #1 创建组件 #2 组件编码 MoveVerify.wxss MoveVerify.wxml MoveVerify.js #3 页面引用 在页面的 json 文件中引用组件 在 ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- 拖动滑块验证——原生JS
** 拖动滑块验证--原生JS ** 大体思路: 1,拖动滑块验证我们首先要分析需要什么事件,怎么触发拖动滑块. 2,首先需要点击事件,当你点击鼠标的时候获取到一个X轴的距离. 3,还需要一个鼠标移动 ...
- JavaScript实现拖动滑块验证(方法已封装)
前提 之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...
- jQuery拖动滑块验证样式
样式: 目录结构: HTML代码: <!DOCTYPE html> <html><head><title>jQuery仿淘宝网拖动滑块验证码代码< ...
- 微信小程序拖动滑块验证
index.wxml <movable-area class="content" style="width:{{area_width}}%">拖动滑 ...
最新文章
- java虚拟机栈帧_Java虚拟机,运行时栈帧结构
- 如何跨域取到response额外的的headers
- 单链表删除所有值为x的元素_C/C++编程笔记:如何使用C++实现单链表?单链表的基本定义...
- 《系统集成项目管理工程师》必背100个知识点-52成功的项目团队特点
- codelite14中文语言包_CodeLite(C++跨平台开发环境) V 11.0.1 中文版
- /*3.使用二维数组存储班上五个学生三门功课的考试成绩,要求输出每一个学生的总分、平均分、最高分、最低分。
- Linux开发_GDB_dump_Core调试
- 【NLPCC 2020】Call for Participation: Shared Tasks in NLPCC 2020
- LeetCode刷题系列(一)把回溯算法框架将给爷爷奶奶听
- pythonreduce()函数、sorted()函数、reversed_cmp函数、类和对象
- 自动驾驶 7-1 Carla 概述 - 自动驾驶汽车模拟Carla Overview - Self-Driving Car Simulation
- dnn305的一个bug
- 代码 设为主页 加入收藏 代码
- 为什么图像预处理矩阵要除以255?
- PlantCV中文文档
- 室内设计——办公楼创意室内设计(包含预览图jpg和.psd文件)
- 最详细的Android图片压缩解释
- 计算机毕业设计之仿12306火车票购票平台
- 对于编码器与解码器的理解
- 分享131个ASP源码,总有一款适合您