快捷導(dǎo)航

Vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證功能

更新時(shí)間：2022年02月16日 16:49:31 作者：風(fēng)葉翩翩

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用Vue實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼，鼠標(biāo)點(diǎn)擊滑動(dòng)驗(yàn)證，驗(yàn)證成功之后會(huì)顯示驗(yàn)證通過。

程序分析

1、鼠標(biāo)的點(diǎn)擊
2、滑塊的拖動(dòng)
3、未驗(yàn)證之前滑動(dòng)條上顯示的文字
4、滑塊箭頭指向Vue函數(shù)
5、判斷是否拖動(dòng)完畢
6、拖動(dòng)完畢時(shí)改變背景色并顯示驗(yàn)證成功

效果圖演示

原始狀態(tài)

點(diǎn)擊之后拖動(dòng)

拖動(dòng)完畢

有沒有感覺很奇妙的呢？？？

在欣賞代碼之前準(zhǔn)備工作要做好的?。?！
**特別注意：**相關(guān)架包的引入（三個(gè)架包）

<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/jquery.js"></script>

代碼演示

<!DOCTYPE html>
<html>

?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<script src="js/vue.js"></script>
?? ??? ?<script src="https://unpkg.com/element-ui/lib/index.js"></script>
?? ??? ?<script src="js/jquery.js"></script>
?? ??? ?<style>
?? ??? ??? ?.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/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.handlerFinish {
?? ??? ??? ??? ?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;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?.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>

?? ?</head>

?? ?<body>

?? ??? ?<div id="app">
?? ??? ??? ?<div class="big" >
?? ??? ??? ??? ?<div class="bg"></div>
?? ??? ??? ??? ?<div class="text">{{confirmWords}}</div>
?? ??? ??? ??? ?<div @mousedown="mousedownFn($event)" class="hand handler"></div>
?? ??? ??? ?</div>

?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ?</body>
?? ?
?? ?<script>
?? ??? ?var vm = new Vue({
?? ?
?? ??? ??? ?el: "#app",
?? ??? ??? ?name: '',
?? ??? ??? ?components: {},
?? ??? ??? ?props: {},
?? ??? ??? ?data() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?beginClientX: 0,
?? ??? ??? ??? ??? ?mouseMoveStata: false,
?? ??? ??? ??? ??? ?maxwidth: 258,
?? ??? ??? ??? ??? ?confirmWords: '拖動(dòng)滑塊驗(yàn)證',
?? ??? ??? ??? ??? ?/*滑塊文字*/
?? ??? ??? ??? ??? ?confirmSuccess: false, /*是否成功*/
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?created() {},
?? ??? ??? ?watch: {
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?mousedownFn: function(e) {
?? ??? ??? ??? ??? ?this.mouseMoveStata = true;
?? ??? ??? ??? ??? ?this.beginClientX = e.clientX;
?? ??? ??? ??? ?},?
?? ??? ??? ??? ?//按下滑塊
?? ??? ??? ??? ?successFunction() {
?? ??? ??? ??? ??? ?$(".hand").removeClass('handler').addClass('handlerFinish');
?? ??? ??? ??? ??? ?this.confirmWords = '驗(yàn)證通過'
?? ??? ??? ??? ??? ?$(".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) => {
?? ??? ??? ??? ??? ?//拖動(dòng)使用箭頭指向Vue函數(shù)
?? ??? ??? ??? ??? ?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) => {
?? ??? ??? ??? ??? ?//鼠標(biāo)放開?
?? ??? ??? ??? ??? ?this.mouseMoveStata = false;
?? ??? ??? ??? ??? ?var width = e.clientX - this.beginClientX;
?? ??? ??? ??? ??? ?if(width < this.maxwidth) {
?? ??? ??? ??? ??? ??? ?$(".hand").css({
?? ??? ??? ??? ??? ??? ??? ?'left': 0
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?$(".bg").css({
?? ??? ??? ??? ??? ??? ??? ?'width': 0
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?}
?? ??? ?});
?? ?</script>

</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: