Vueはスライダードラッグ検証機能の全プロセスを実現します

レンダリング

骨組みを定義し、HTMLとCSSを記述する

HTML部分

<テンプレート>
    <div class="drag-wrapper" ref="dragDiv">
        <div class="drag_bg"></div>
        <div class="drag_text f14">{{ 確認ワード }}</div>
        <!-- 移動されたモジュール -->
        <div ref="moveDiv"
             @mousedown="mousedownFn($event)"
             :class="{'handler_ok_bg': 確認成功}"
             クラス="ハンドラー handler_bg"></div>
    </div>
</テンプレート>

CSS部分：画像ソースに懸念があるため、base64画像として記述されています

<スタイルスコープ>
    。ドラッグ{
        位置: 相対的;
        背景色: #e8e8e8;
        幅: 100%;
        高さ: 40px;
        行の高さ: 40px;
        テキスト配置: 中央;
    }
    。ハンドラ{
        幅: 40px;
        高さ: 40px;
        境界線: 1px 実線 #ccc;
        カーソル: 移動;
        位置: 絶対;上: 0px;左: 0px;
    }
    .ハンドラ_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++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++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
    }
    .drag_bg{
        背景色: #7ac23c;
        高さ: 40px;
        幅: 0px;
    }
    .ドラッグテキスト{
        位置: 絶対;
        上: 0px;
        幅: 100%;テキスト配置: 中央;
        -moz-user-select: なし;
        -webkit-user-select: なし;
        ユーザー選択: なし;
        -o-ユーザー選択:なし;
        -ms-ユーザー選択:なし;
    }
</スタイル>

スライドとドラッグの検証を実装する

パラメータの定義

データ（） {
    戻る {
        beginClientX:0, // 画面の左端からの距離mouseMoveStata:false, // ドラッグ ステータスの判定をトリガーmaxwidth:'', // スライダーの幅に基づいて計算された最大ドラッグ幅confirmWords:'ドラッグ スライダーの検証', // スライダーのテキストconfirmSuccess:false // 検証成功の判定}
}

1. マウント時に、スライダーの幅に基づいてドラッグ可能な最大幅を計算し、指のタッチと離脱イベントをリッスンします。

マウント() {
    // スライダーの幅に基づいてドラッグ可能な最大幅を計算します 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)
}

2. 指をスライドさせたり離したりするイベントを記述する

マウス移動イベント

まずドラッグ状態がトリガーされているかどうかを判断し、次にドラッグ距離とモジュール距離を計算し、リアルタイムで値を割り当てます。

//成功を確認する function mouseMoveFn(e){
    if(this.mouseMoveStata){
        幅 = e.clientX - this.beginClientX とします。
        if(幅 > 0 && 幅 <= this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left = 幅 + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = 幅 + 'px'
        }そうでない場合、(幅 > this.maxwidth) this.successFunction()
    }
},

マウスアップイベント

ドラッグ状態をfalseに変更し、スライダーを対応する指ドロップ位置に移動します。

moseUpFn(e) {
    this.mouseMoveState = !1 // 状態を変更する const 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'
    }
}

上記のHTMLセクションのハンドラブロックでは、mousedownイベントが定義されています（mousedownFn($event)）

ファイル選択などのデフォルトのブラウザ動作を防止し、ドラッグ状態をトリガーするためのしきい値をオンにし、指が移動する距離を記録する必要があります。

マウスダウンFn:関数(e){
    e.preventDefault && e.preventDefault() // テキスト選択などのデフォルトのブラウザイベントを防止 this.mouseMoveStata = true // ドラッグ状態をトリガーするためのしきい値を開く this.beginClientX = e.clientX // 指が移動する距離を記録する},

この時点で機能は完了です。。

完全なJSコードは次のとおりです。

<スクリプト>
    エクスポートデフォルト{
        データ（）{
            戻る {
                beginClientX:0, /*画面の左端からの距離*/
                mouseMoveStata:false, /*ドラッグステータスの判定をトリガー*/
                maxwidth:'', /*スライダーの幅に基づいて計算された最大ドラッグ幅*/
                confirmWords:'スライダーをドラッグして確認します', /*スライダーテキスト*/
                confirmSuccess:false /*検証成功判定*/
            }
        },
        マウントされた(){
            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)
        },
        メソッド: {
            マウスダウンFn:関数(e){
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault() //テキスト選択やその他のブラウザのデフォルトイベントを防止する this.mouseMoveStata = true
                    this.beginClientX = e.clientX
                }
            },
            //mousedoen イベント successFunction(){
                this.confirmSuccess = true
                this.confirmWords = '検証に合格しました'
                this.$emit('onValidation', true)
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn)
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn)
                }そうでない場合、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'
            },
            //成功を確認する function mouseMoveFn(e){
                if(this.mouseMoveStata){
                    幅 = e.clientX - this.beginClientX とします。
                    if(幅 > 0 && 幅 <= this.maxwidth) {
                        document.getElementsByClassName('handler')[0].style.left = 幅 + 'px'
                        document.getElementsByClassName('drag_bg')[0].style.width = 幅 + 'px'
                    }それ以外の場合、幅 > this.maxwidth の場合、 this.successFunction()
                }
            },
            //マウス移動イベント moseUpFn(e){
                this.mouseMoveStata = false
                var 幅 = e.clientX - this.beginClientX
                幅<this.maxwidth)の場合{
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
                }
            }
        }
    }
</スクリプト>

要約する

Vue のスライダードラッグ検証機能の実装に関するこの記事はこれで終わりです。Vue のスライダードラッグ検証に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: