Vue实现滑动验证功能
用Vue实现滑动验证码，鼠标点击滑动验证，验证成功之后会显示验证通过。
程序分析
1、鼠标的点击
2、滑块的拖动
3、未验证之前滑动条上显示的文字
4、滑块箭头指向Vue函数
5、判断是否拖动完毕
6、拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态
点击之后拖动
拖动完毕
有没有感觉很奇妙的呢？？？
在欣赏代码之前准备工作要做好的！！！
**特别注意：**相关架包的引入（三个架包）
<script src="js/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="js/jquery.js"></script>
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/jquery.js"></script>
<style>
.big {
border-radius:30px;
position: relative;
background-color: #75CDF9;
width: 300px;
height: 34px;
margin-left: 30px;
margin-top: 100px;
line-height: 34px;
text-align: center;
}
.hand {
border-radius:30px;
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: move;
}
.handler {
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;
}
.handlerFinish {
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;
}
.bg {
border-radius:30px;
background-color: #13CE66;
height: 34px;
width: 0px;
}
.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="big" >
<div class="bg"></div>
<div class="text">{{confirmWords}}</div>
<div @mousedown="mousedownFn($event)" class="hand handler"></div>
</div>
</div>
</body>
<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() {
$(".hand").removeClass('handler').addClass('handlerFinish');
this.confirmWords = '验证通过'
$(".big").css({
'color': '#fff'
});
$(".big").css({
'background-color': '#13CE66'
});
$(".hand").css({
'left': this.maxwidth
});
$(".bg").css({
'width': this.maxwidth
});
$('body').unbind('mousemove');
$('body').unbind('mouseup');
this.confirmSuccess = true;
} //判断是否成功
},
mounted() {
$('body').on('mousemove', (e) => {
//拖动使用箭头指向Vue函数
if(this.mouseMoveStata) {
var width = e.clientX - this.beginClientX;
if(width > 0 && width <= this.maxwidth) {
$(".hand").css({
'left': width
});
$(".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) {
$(".hand").css({
'left': 0
});
$(".bg").css({
'width': 0
});
}
})
}
});
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue插件之滑动验证码用法详解
本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 安装 使用方法 更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数 注意事项 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github
-
vue如何在项目中调用腾讯云的滑动验证码
在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目) 导言 首先看看官方的步骤教学: https://cloud.tencent.com/document/product/1110/36839 其中,前端涉及到的是"步骤3:客户端接入",里面介绍了两种接入方法:"快速接入"和"定制接入". 项目是原生HTML 或者 jQuery 开发,那么可以使用"快速接入". 项目使用 vue.react 等框架开发,则需要使用&q
-
vue实现一拉到底的滑动验证
本文实例为大家分享了vue实现简单的一拉到底的滑动验证的具体代码,供大家参考,具体内容如下 直接上代码 <template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div r
-
vue 登录滑动验证实现代码
在没给大家讲解实现代码之前,先给大家分享效果图: 之前别人都是用jq写的,自己整理了一下开始使用 <el-form-item label="验证"> <div class="form-inline-input"> <div class="code-box" id="code-box"> <input type="text" name="code"
-
Vue插件之滑动验证码
本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下 预览 目前仅前端实现,支持移动端滑动事件.版本V1.0.5 github文档地址 安装 npm install --save vue-monoplasty-slide-verify 使用方法: // main.js import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); //
-
vue+drf+第三方滑动验证码接入的实现
目录 1.背景 2.验证流程 3.创建验证 4.前端代码 4.1 添加核心js文件 4.2 添加配置 4.3 组件修改 5.后端代码 5.1 添加配置 5.2 接收验证并返回 5.3 添加url路由 6.运行测试 1.背景 近期在项目开发练习中用到了登录功能 + 验证码的需求,验证码一般分为三种类型:图片验证码.短信验证码.滑动验证码,相关实现思路如下 图片验证码 对于图片验证码的实现可以借助python中的第三方模块pillow的相关方法进行实现(有时间会写文章) 短信验证码 短信验证码的主要
-
vue仿淘宝滑动验证码功能(样式模仿)
我们知道验证码的目的 是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端 下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件 可以直接使用 1.实际效果 2.PC端!!! vue组
-
使用Vue 实现滑动验证码功能
做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的
-
Vue实现滑动验证功能
用Vue实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过. 程序分析 1.鼠标的点击2.滑块的拖动3.未验证之前滑动条上显示的文字4.滑块箭头指向Vue函数5.判断是否拖动完毕6.拖动完毕时改变背景色并显示验证成功 效果图演示 原始状态 点击之后拖动 拖动完毕 有没有感觉很奇妙的呢??? 在欣赏代码之前准备工作要做好的!!!**特别注意:**相关架包的引入(三个架包) <script src="js/vue.js"></script> <scr
-
vue实现图片滑动验证功能
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件——npm install --save vue-monoplasty-slide-verify 注意此处的--save也就是简化版的-s,是为了将下载的插件保存到package.json中的depencedies中,这样其他人在下载你的项目后,依然可以通过npm install将插件安装到node_modul
-
vue实现滑动验证条
本文实例为大家分享了vue实现滑动验证条的具体代码,供大家参考,具体内容如下 效果 代码 VerifySlider.vue <template> <div ref="dragDiv" class="drag" > <div ref="drag_bg" class="drag_bg" /> <div ref="drag_text"
-
vue实现滑动解锁功能
本文实例为大家分享了vue实现滑动解锁功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: <template> <div> <div id="box"> <div class="bgColor"></div> <div class="txt">滑动解锁</div> <!--给i标签添加上相应字体图
-
Python 实现自动登录+点击+滑动验证功能
需要用到的库有selenium,还需要安装Chrome浏览器驱动,具体如何安装我就不详述了 在这里我模拟了csdn的登录过程 ** 1**.首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码输入框,输入后 点击登陆 弹出验证滑动条 def __init__(self): self.url = 'https://passport.csdn.net/login' self.browser = webdriver.Chrome() #获取登录按钮对象 选择 账号密码登录 def get_pa
-
Vue实现滑动拼图验证码功能
缘由:之前看哔哩哔哩官网登录的时候有一个拼图验证码,很好奇怎么去实现.然后就想着自己弄一个.先给大家看我的最终效果.后面再一点点拆解代码. 为什么想着写这个功能呢,主要在于拼图验证码在前端这里会比较复杂并且深入.相比文字拼写,12306的图片验证码都没有拼图验证码对前端的要求来的复杂,和难. 我总结下知识点: 1.弹窗功能 2.弹窗基于元素定位 3.元素拖动 4.canvas绘图 5.基础逻辑 一.弹窗和弹窗组件 抱歉,这里我偷懒了直接用了elementUI的el-popover组件,所以小伙伴
-
vue+vue-validator 表单验证功能的实现代码
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示: 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"