Vue實現滑動驗證功能

2022-02-16 19:00:10

用Vue實現滑動驗證碼，滑鼠點選滑動驗證，驗證成功之後會顯示驗證通過。

程式分析

1、滑鼠的點選
2、滾軸的拖動
3、未驗證之前滑動條上顯示的文字
4、滾軸箭頭指向Vue函數
5、判斷是否拖動完畢
6、拖動完畢時改變背景色並顯示驗證成功

效果圖演示

原始狀態

點選之後拖動

拖動完畢

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

在欣賞程式碼之前準備工作要做好的！！！
**特別注意：**相關架包的引入（三個架包）

<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: '拖動滾軸驗證',
                    /*滾軸文字*/
                    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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Vue實現滑動驗證功能

程式分析

效果圖演示

程式碼演示

熱門文章