滑动验证
PC端的(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="position: absolute;top: 0px;left: 0px;"></div> </div> </template> <script> export default { data(){ return { beginClientX:0, /*距离屏幕左端距离*/ mouseMoveStata:false, /*触发拖动状态 判断*/ maxwidth:'', /*拖动最大宽度,依据滑块宽度算出来的*/ confirmWords:'拖动滑块验证', /*滑块文字*/ confirmSuccess:false /*验证成功判断*/ } }, methods: { mousedownFn:function (e) { if(!this.confirmSuccess){ e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件 this.mouseMoveStata = true; this.beginClientX = e.clientX; } }, //mousedoen 事件 successFunction(){ this.confirmSuccess = true this.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'; }, //验证成功函数 mouseMoveFn(e){ if(this.mouseMoveStata){ let width = e.clientX - this.beginClientX; if(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 = false; var width = e.clientX - this.beginClientX; if(width<this.maxwidth){ document.getElementsByClassName('handler')[0].style.left = 0 + 'px'; document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'; } } //mouseup事件 }, mounted(){ this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; document.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("") no-repeat center; } .handler_ok_bg{ background: #fff url("") 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>
移动端的(Vue组件)
<template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></div> <div class="drag_text">{{confirmWords}}</div> <div ref="moveDiv" @touchstart="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div> </div> </template> <script> export default { data(){ return { beginClientX:0, /*距离屏幕左端距离*/ mouseMoveStata:false, /*触发拖动状态 判断*/ maxwidth:'', /*拖动最大宽度,依据滑块宽度算出来的*/ confirmWords:'拖动滑块验证', /*滑块文字*/ confirmSuccess:false /*验证成功判断*/ } }, methods: { mousedownFn:function (e) { if(!this.confirmSuccess){ e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件 this.mouseMoveStata = true; this.beginClientX = e.changedTouches[0].clientX; } }, //mousedoen 事件 successFunction(){ this.confirmSuccess = true this.confirmWords = '验证通过'; if(window.addEventListener){ document.getElementsByTagName('html')[0].removeEventListener('touchmove',this.mouseMoveFn); document.getElementsByTagName('html')[0].removeEventListener('touchend',this.moseUpFn); }else { document.getElementsByTagName('html')[0].removeEventListener('touchend',()=>{}); } 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'; }, //验证成功函数 mouseMoveFn(e){ if(this.mouseMoveStata){ let width = e.changedTouches[0].clientX - this.beginClientX; if(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 = false; var width = e.changedTouches[0].clientX - this.beginClientX; if(width<this.maxwidth){ document.getElementsByClassName('handler')[0].style.left = 0 + 'px'; document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'; } } //mouseup事件 }, mounted(){ this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; document.getElementsByTagName('html')[0].addEventListener('touchmove',this.mouseMoveFn); document.getElementsByTagName('html')[0].addEventListener('touchend',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("") no-repeat center; } .handler_ok_bg{ background: #fff url("") 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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~