vue实现简单滑块验证
程序员文章站
2022-04-14 15:04:53
本文实例为大家分享了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>
效果图如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。