vue实现简单滑块验证
程序员文章站
2022-07-05 22:18:36
本文实例为大家分享了vue滑块验证的实现,代码如下
本文实例为大家分享了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: 30%; height: 34px; line-height: 34px; text-align: center; } .handler { 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 { 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配置文件自动生成路由和菜单实例代码