Vue实现滑动验证功能
更新时间:2022年02月16日 16:49:31 作者:风叶翩翩
这篇文章主要为大家详细介绍了Vue实现滑动验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
用Vue实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过。
程序分析
1、鼠标的点击
2、滑块的拖动
3、未验证之前滑动条上显示的文字
4、滑块箭头指向Vue函数
5、判断是否拖动完毕
6、拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态
点击之后拖动
拖动完毕
有没有感觉很奇妙的呢???
在欣赏代码之前准备工作要做好的!!!
**特别注意:**相关架包的引入(三个架包)
<script src="http://9i0i.com/pic.php?p=js/vue.js"></script> <script src="http://9i0i.com/pic.php?p=https://unpkg.com/element-ui/lib/index.js"></script> <script src="http://9i0i.com/pic.php?p=js/jquery.js"></script>
代码演示
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title></title> ?? ??? ?<script src="http://9i0i.com/pic.php?p=js/vue.js"></script> ?? ??? ?<script src="http://9i0i.com/pic.php?p=https://unpkg.com/element-ui/lib/index.js"></script> ?? ??? ?<script src="http://9i0i.com/pic.php?p=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?mounted周期中document.querySelectorAll()获取不到元素的解决
这篇文章主要介绍了vue?mounted周期中document.querySelectorAll()获取不到元素的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03Vue 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论