vue 实现一个滑块拖动验证功能

具体的代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style scoped>.drag {border-radius:30px;position: relative;background-color: #75CDF9;width: 300px;height: 34px;margin-left: 30px;margin-top: 100px;line-height: 34px;text-align: center;}.handler {border-radius:30px;position: absolute;top: 0px;left: 0px;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 {border-radius:30px;background-color: #13CE66;height: 34px;width: 0px;}.drag_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="drag" ><div class="drag_bg"></div><div class="drag_text">{{confirmWords}}</div><div @mousedown="mousedownFn($event)" class="handler handler_bg"></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><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() {$(".handler").removeClass('handler_bg').addClass('handler_ok_bg');this.confirmWords = '验证通过'$(".drag").css({'color': '#fff'});$(".drag").css({'background-color': '#13CE66'});$(".handler").css({'left': this.maxwidth});$(".drag_bg").css({'width': this.maxwidth});$('body').unbind('mousemove');$('body').unbind('mouseup');this.confirmSuccess = true;} //验证成功函数 },mounted() {$('body').on('mousemove', (e) => {//拖动，这里需要用箭头函数，不然this的指向不会是vue对象 if(this.mouseMoveStata) {var width = e.clientX - this.beginClientX;if(width > 0 && width <= this.maxwidth) {$(".handler").css({'left': width});$(".drag_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) {$(".handler").css({'left': 0});$(".drag_bg").css({'width': 0});}})}});</script></body></html>

vue 实现一个滑块拖动验证功能相关推荐

Uipath实现简单的滑块拖动验证
本篇文章主要介绍使用[Click]Activities这一个活动来实现拖动滑块的验证,为拖动滑块验证提供了一种思路.但只能应用于滑块从头滑到尾,不支持拼图的滑块验证. 说白了,这篇文章更像是介绍[Cl ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
vue实现一个类似浏览器搜索功能(ctrl + f)
目录引言一.介绍自己项目的需求二.先说说我的数据怎么设置的三.具体功能的实现思路: 1.点击左侧目录跳转到对应位置 2.滚动到相应位置左侧目录树的对应标题变蓝色 3.搜索功能 4.目录展开和收 ...
html实现滑块拖动验证
html代码部分: <div id="wrapper"><div id="drop_box"><span class=" ...
［Android］手机短信验证功能
介绍短信验证功能大家都很熟悉了.在很多地方都能见到,注册新用户或者短息验证支付等.短信验证利用短信验证码来注册会员,大大降低了非法注册,很大程度上提高了用户账户的安全性. 目前市面上已经有了很多提供 ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
Vue基于ElementUI组件实现滑块登录验证组件
引言在实际项目应用开发中,为了防止用户频繁发起登录请求,导致后端登录访问压力瞬时过大,我们可以设计一些验证规则防刷,最常见的方式是通过输入验证码的方式降低刷新频率,后台通过返回不同的验证码从而降低用 ...
python实现滑块验证功能_Python 滑块验证码
image 看了滑块验证码(滑动验证码)相比图形验证码,破解难度如何?中<Python3网络爬虫开发实战>作者崔庆才丨静觅的一个回答,里面有详细介绍如何对抗滑块验证码,因此学习一下,对 ...
【愚公系列】2022年12月 .NET CORE工具案例-滑块验证码和拼图验证功能实现
文章目录前言 1.滑块验证码的定义 2.滑块验证码的安全性分析 3.滑块验证码的第三方服务一.滑动验证码和拼图验证功能实现 1.逻辑分析 2.新建项目 3.配置缓存 4.配置跨域 5.后端源码 6 ...

vue 实现一个滑块拖动验证功能

vue 实现一个滑块拖动验证功能相关推荐

最新文章

热门文章