Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
程序员文章站
2022-03-07 17:13:24
vue验证滑块功能，在生活中很多地方都可以见到，那么使用起来非常方便，基于vue如何实现滑块验证呢？下面通过代码给大家讲解。
效果图如下所示：
拖动前
拖动后...
vue验证滑块功能，在生活中很多地方都可以见到，那么使用起来非常方便，基于vue如何实现滑块验证呢？下面通过代码给大家讲解。
效果图如下所示：
拖动前
拖动后
代码引用的css与js都是线上的
将代码全部复制到一个html中可以直接打开，极其简单。
来分析一下代码
底色div上放了一个变色div再放一个提示字的div最后加一个滑块div
给滑块div绑定鼠标移动事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style scoped>
.drag {
border-radius:30px;
position: relative;
background-color: #75cdf9;
width: 300px;
height: 34px;
margin-left: 30px;
margin-top: 100px;
line-height: 34px;
text-align: center;
}
.handler {
border-radius:30px;
position: absolute;
top: 0px;
left: 0px;
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 {
border-radius:30px;
background-color: #13ce66;
height: 34px;
width: 0px;
}
.drag_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="drag" >
<div class="drag_bg"></div>
<div class="drag_text">{{confirmwords}}</div>
<div @mousedown="mousedownfn($event)" class="handler handler_bg"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<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() {
$(".handler").removeclass('handler_bg').addclass('handler_ok_bg');
this.confirmwords = '验证通过'
$(".drag").css({
'color': '#fff'
});
$(".drag").css({
'background-color': '#13ce66'
});
$(".handler").css({
'left': this.maxwidth
});
$(".drag_bg").css({
'width': this.maxwidth
});
$('body').unbind('mousemove');
$('body').unbind('mouseup');
this.confirmsuccess = true;
} //验证成功函数
},
mounted() {
$('body').on('mousemove', (e) => {
//拖动，这里需要用箭头函数，不然this的指向不会是vue对象
if(this.mousemovestata) {
var width = e.clientx - this.beginclientx;
if(width > 0 && width <= this.maxwidth) {
$(".handler").css({
'left': width
});
$(".drag_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) {
$(".handler").css({
'left': 0
});
$(".drag_bg").css({
'width': 0
});
}
})
}
});
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)，希望对大家有所帮助