Vue implementiert eine einfache Slider-Verifizierung

<Vorlage>
  <div Klasse="ziehen"
       ref="dragDiv">
    <div Klasse="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div ref="VerschiebeDiv"
         @mousedown="mousedownFn($event)"
         :Klasse="{'handler_ok_bg':confirmSuccess}"
         Klasse="Handler handler_bg"
         Stil="Position: absolut;oben: 0px;links: 0px;"></div>
  </div>
</Vorlage>

<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 der erfolgreichen Überprüfung */
    }
  },
  Methoden: {
    mousedownFn: Funktion (e) {
      wenn (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault() // Verhindere Standardereignisse des Browsers wie z. B. die Textauswahl this.mouseMoveStata = true
        this.beginClientX = e.clientX
      }
    }, // mousedoen Ereignis Erfolgsfunktion () {
      this.confirmSuccess = wahr
      this.confirmWords = 'Verifizierung erfolgreich'
      wenn (window.addEventListener) {
        document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)
        document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)
      } anders {
        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 überprüfen Funktion mouseMoveFn (e) {
      wenn (this.mouseMoveStata) {
        let width = e.clientX - this.beginClientX
        wenn (Breite > 0 und 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.max.Breite) {
        document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
      }
    } // Mouseup-Ereignis},
  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)
  }
}
</Skript>

<Stilbereich>
.ziehen {
  Position: relativ;
  Hintergrundfarbe: #e8e8e8;
  Breite: 30%;
  Höhe: 34px;
  Zeilenhöhe: 34px;
  Textausrichtung: zentriert;
}
.handler {
  Breite: 40px;
  Höhe: 32px;
  Rand: 1px durchgezogen #ccc;
  Cursor: bewegen;
}
.handler_bg {
  Hintergrund: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==')
    Zentrum ohne Wiederholung;
}
.handler_ok_bg {
  Hintergrund: #fff
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==')
    Zentrum ohne Wiederholung;
}
.ziehen_bg {
  Hintergrundfarbe: #7ac23c;
  Höhe: 34px;
  Breite: 0px;
}
.Text ziehen {
  Position: absolut;
  oben: 0px;
  Breite: 100 %;
  Textausrichtung: zentriert;
  -moz-Benutzerauswahl: keine;
  -webkit-Benutzerauswahl: keine;
  Benutzerauswahl: keine;
  -o-Benutzerauswahl: keine;
  -ms-user-select: keine;
}
</Stil>