Vue implementiert einen Scrollbar-Stil

<div Klasse="scrollBar" v-if="roleList.length > 5">
        <div
          Klasse="Box"
          @mousedown="bewegen"
          v-bind:style="{ Breite: aktive Breite + 'px' }"
        ></div>
      </div>

.scrollBar {
  Breite: 500px;
  Höhe: 6px;
  Hintergrund: #d5dbf5;
  Rand: 0 automatisch;
  Rand oben: 72px;
  Rahmenradius: 4px;
  Position: relativ;

  .Kasten {
    Breite: 30px;
    Höhe: 100%;
    Hintergrund: #fff;
    Rahmenradius: 4px;
    Position: absolut;
    links: 0;
  }
  .box:hover {
    Cursor: Zeiger;
  }
}

montiert() {
    //Breite des Bildlaufbereichs Ich durchlaufe hier die Benutzerliste, also erhalte ich die Länge der Liste * die Breite jedes li ist die Gesamtbreite let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //Breite des sichtbaren Bereichs 1065 Dies ist die Breite des weißen Hintergrundfelds im obigen Bild //Schiebereglerbreite 500 ist die Breite der Bildlaufleiste. Diese Breite wird berechnet, um die Distanz zu ermitteln, über die der Schieberegler gleiten kann. Dies wird weiter unten erläutert this.activewidth = 500 * (1065 / bgWidth);
  },

bewegen(e) {
      //Holen Sie sich das Zielelement let odiv = e.target;
      //Scrollbereich
      //Berechnen Sie die Position der Maus relativ zum Element let disX = e.clientX - odiv.offsetLeft;
      //Die Distanz, über die die Bildlaufleiste scrollen kann, let viewArea = 500 - this.activewidth;
      //Breite des Bildlaufbereichs let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //Maus gedrückt und bewegt-Ereignis //Subtrahiere die Position der Maus relativ zum Element von der Position der Maus, um die Position des Elements zu erhalten let left = e.clientX - disX;
        //left < 0 bedeutet, dass der Schieberegler ganz links angekommen ist //oder left > viewArea bedeutet, dass der Schieberegler ganz rechts angekommen istif (left < 0 || left > viewArea) {
          //console.log("Es ist vorbei");
          // Zu diesem Zeitpunkt müssen Sie das Ereignis löschen, sonst verlässt der Schieberegler den Bildlaufleistenbereich. document.onmousemove = null;
        } anders {
         //Die Gleitdistanz des Schiebereglers odiv.style.left = left + "px";
          //Gleitstrecke des Scrollbereichs = Breite des Scrollbereichs * (Gleitstrecke des Schiebereglers / 500)
          dies.$refs.ScrollArea.style.left =
            "-" + Hintergrundbreite * links / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        Dokument.onmousemove = null;
        Dokument.onmouseup = null;
      };
    },