南通市网站建设,湖南省建设厅,东莞seo全网营销,个人网站视频建设用Vue实现滑动验证码#xff0c;鼠标点击滑动验证#xff0c;验证成功之后会显示验证通过。
程序分析
鼠标的点击滑块的拖动未验证之前滑动条上显示的文字滑块箭头指向Vue函数判断是否拖动完毕拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态 点击之后拖动 拖…用Vue实现滑动验证码鼠标点击滑动验证验证成功之后会显示验证通过。
程序分析
鼠标的点击滑块的拖动未验证之前滑动条上显示的文字滑块箭头指向Vue函数判断是否拖动完毕拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态 点击之后拖动 拖动完毕 有没有感觉很奇妙的呢
在欣赏代码之前准备工作要做好的 **特别注意**相关架包的引入三个架包 script srcjs/vue.js/scriptscript srchttps://unpkg.com/element-ui/lib/index.js/scriptscript srcjs/jquery.js/script代码演示
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlescript srcjs/vue.js/scriptscript srchttps://unpkg.com/element-ui/lib/index.js/scriptscript srcjs/jquery.js/scriptstyle.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/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREYIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9AbOnfsIiBOxKcInhyCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWBI1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4WfOUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg) no-repeat center;}.handlerFinish {background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREYIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8ksHwwAAASZJREFUeNpi/P//PwMyKD8uZwkUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZIDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAfAmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/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/headbodydiv idappdiv classbig div classbg/divdiv classtext{{confirmWords}}/divdiv mousedownmousedownFn($event) classhand handler/div/div/div/bodyscriptvar 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了解更多关注我呦
