Vue realisiert den gesamten Prozess der Slider-Drag-Verifizierungsfunktion

<Vorlage>
    <div Klasse="drag-wrapper" ref="dragDiv">
        <div Klasse="drag_bg"></div>
        <div class="drag_text f14">{{ Wörter bestätigen }}</div>
        <!-- Verschobene Module -->
        <div ref="VerschiebeDiv"
             @mousedown="mousedownFn($event)"
             :Klasse="{'handler_ok_bg': Erfolg bestätigen}"
             Klasse="Handler handler_bg"></div>
    </div>
</Vorlage>

<Stilbereich>
    .ziehen{
        Position: relativ;
        Hintergrundfarbe: #e8e8e8;
        Breite: 100 %;
        Höhe: 40px;
        Zeilenhöhe: 40px;
        Textausrichtung: zentriert;
    }
    .handler{
        Breite: 40px;
        Höhe: 40px;
        Rand: 1px durchgezogen #ccc;
        Cursor: bewegen;
        Position: absolut;oben: 0px;links: 0px;
    }
    .handler_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{
        Hintergrundfarbe: #7ac23c;
        Höhe: 40px;
        Breite: 0px;
    }
    .Text ziehen{
        Position: absolut;
        oben: 0px;
        Breite: 100 %; Textausrichtung: zentriert;
        -moz-Benutzerauswahl: keine;
        -webkit-Benutzerauswahl: keine;
        Benutzerauswahl: keine;
        -o-Benutzerauswahl: keine;
        -ms-Benutzerauswahl: keine;
    }
</Stil>

Daten() {
    zurückkehren {
        beginClientX:0, // Abstand vom linken Ende des BildschirmsmouseMoveStata:false, // Beurteilung des Drag-Status auslösenmaxwidth:'', // Maximale Drag-Breite, berechnet basierend auf der Slider-BreiteconfirmWords:'Drag-Slider-Überprüfung', // Slider-TextconfirmSuccess:false // Beurteilung der erfolgreichen Überprüfung}
}

montiert() {
    // Berechnen Sie die maximale verschiebbare Breite basierend auf der Schiebereglerbreite this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    // Auf Fingerberührungsereignisse achten document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    // Auf Ereignisse beim Weggehen des Fingers achten document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
}

//Erfolg prüfen Funktion mouseMoveFn(e){
    wenn(diese.mouseMoveStata){
        let width = e.clientX - this.beginClientX
        wenn(Breite > 0 && Breite <= diese.maxbreite) {
            document.getElementsByClassName('handler')[0].style.left = Breite + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = Breite + 'px'
        }sonst wenn(Breite > diese.max.Breite) diese.Erfolgsfunktion()
    }
},

moseUpFn(e) {
    this.mouseMoveState = !1 // Status ändern const width = e.clientX - this.beginClientX // Breite berechnen und abrufen if (width < this.maxwidth) { // Wenn die Breite kleiner als die Breite des Moduls ist, einen Wert zuweisen document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
    }
}

Mauszeiger nach untenFn:Funktion (e) {
    e.preventDefault && e.preventDefault() // Verhindere standardmäßige Browserereignisse wie die Textauswahl this.mouseMoveStata = true // Öffne den Schwellenwert zum Auslösen des Drag-Zustands this.beginClientX = e.clientX // Zeichne die Distanz auf, über die sich der Finger bewegt},

<Skript>
    Standard exportieren {
        Daten(){
            zurückkehren {
                beginClientX:0, /*Abstand vom linken Bildschirmende*/
                mouseMoveStata:false, /*Beurteilung des Drag-Status auslösen*/
                maxwidth:'', /*Maximale Drag-Breite, berechnet basierend auf der Slider-Breite*/
                confirmWords: „Ziehen Sie den Schieberegler zur Bestätigung“, /*Schiebereglertext*/
                confirmSuccess:false /*Beurteilung über erfolgreichen Abschluss der Überprüfung*/
            }
        },
        montiert(){
            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)
        },
        Methoden: {
            Mauszeiger nach untenFn:Funktion (e) {
                wenn(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault() //Textauswahl und andere Standardereignisse des Browsers verhindern this.mouseMoveStata = true
                    this.beginClientX = e.clientX
                }
            },
            //mousedoen Ereignis Erfolgsfunktion () {
                this.confirmSuccess = wahr
                this.confirmWords = 'Verifizierung erfolgreich'
                dies.$emit('onValidation', true)
                wenn(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn)
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn)
                }sonst 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'
            },
            //Erfolg prüfen Funktion mouseMoveFn(e){
                wenn(diese.mouseMoveStata){
                    let width = e.clientX - this.beginClientX
                    wenn(Breite > 0 && Breite <= diese.maxbreite) {
                        document.getElementsByClassName('handler')[0].style.left = Breite + 'px'
                        document.getElementsByClassName('drag_bg')[0].style.width = Breite + 'px'
                    }sonst wenn(Breite > diese.max.Breite) diese.Erfolgsfunktion()
                }
            },
            //Mausbewegungsereignis moseUpFn(e){
                this.mouseMoveStata = false
                var Breite = e.clientX - this.beginClientX
                wenn(Breite<diese.maxBreite){
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
                }
            }
        }
    }
</Skript>