Vue implementiert Drag-Fortschrittsbalken

<Vorlage>
 <div>
  <div Klasse="Schieberegler" ref="Schieberegler">
   <div Klasse="Prozess" :style="{ width }"></div>
   <div Klasse="thunk" ref="trunk" :style="{ left }">
    <div Klasse="Block"></div>
    <div class="Tipps">
     <!-- <span>{{scale*100}}</span> -->
     <i class="fas fa-caret-down"></i>
    </div>
   </div>
  </div>
  <div>
   <Schaltfläche
    @klick="
     () => {
      dies.per++;
     }
    "
   >
    +</Schaltfläche
   >{{ pro }}%<button
    @klick="
     () => {
      wenn (dies.per > 0) {
       dies.per--;
      }
     }
    "
   >
    -
   </button>
  </div>
 </div>
</Vorlage>
<Skript>
/*
 * min Mindestwert des Fortschrittsbalkens* max Höchstwert des Fortschrittsbalkens* v-model führt eine bidirektionale Bindung des aktuellen Werts durch, um den Drag-Fortschritt in Echtzeit anzuzeigen* */
Standard exportieren {
 Requisiten: ["min", "max", "Wert"],
 Daten() {
  zurückkehren {
   slider: null, //Bildlaufleiste DOM-Element thunk: null, //DOM-Element ziehen per: this.value, //Aktueller Wert};
 },
 //Beim Rendern auf der Seite mounted() {
  dieser.slider = dieser.$refs.slider;
  dies.thunk = dies.$refs.trunk;
  var _this = dies;
  this.thunk.onmousedown = Funktion (e) {
   var Breite = parseInt(_this.width);
   var disX = e.clientX;
   document.onmousemove = Funktion (e) {
    // Wert, links, Breite
    // Wenn sich der Wert ändert, werden die linke Seite und die Breite durch die berechneten Eigenschaften geändert

    // Neue Breite beim Ziehen ermitteln
    var neueWidth = e.clientX - disX + Breite;
    // Beim Ziehen den neuen Prozentsatz abrufen var scale = newWidth / _this.slider.offsetWidth;
    _this.per = Math.ceil((_this.max - _this.min) * Skala + _this.min);
    _this.per = Math.max(_this.per, _this.min);
    _this.per = Math.min(_this.per, _this.max);
    _this.$emit("Eingabe", _this.per);
   };
   dokument.onmouseup = Funktion () {
    Dokument.onmousemove = Dokument.onmouseup = null;
   };
   gibt false zurück;
  };
 },
 berechnet: {
  // Legen Sie einen Prozentsatz fest, um die Breite des Slider-Fortschritts und den linken Wert des Stamms zu berechnen // Die entsprechende Formel lautet aktueller Wert - Minimalwert / Maximalwert - Minimalwert = Breite des Slider-Fortschritts / Gesamtbreite des Slider
  // Rumpf links = Slider-Fortschrittsbreite + Rumpfbreite / 2
  Skala() {
   zurück (dieses.per - dies.min) / (dieses.max - dies.min);
  },
  Breite() {
   wenn (dieser.Schieberegler) {
    gib diese.Schieberegler-Offsetbreite * diese.Skala + "px" zurück;
   } anders {
    gibt 0 + "px" zurück;
   }
  },
  links() {
   wenn (dieser.Schieberegler) {
    zurückkehren (
     dieser.Schieberegler.OffsetWidth * dieser.Skala -
     diese.thunk.offsetWidth / 2 +
     "px"
    );
   } anders {
    gibt 0 + "px" zurück;
   }
  },
 },
};
</Skript>
<Stil>
.Kasten {
 Rand: 100px auto 0;
 Breite: 80%;
}
.klar:nach {
 Inhalt: "";
 Anzeige: Block;
 klar: beides;
}
.Schieberegler {
 Benutzerauswahl: keine;
 Position: relativ;
 Rand: 20px 0;
 Breite: 400px;
 Höhe: 10px;
 Hintergrund: #e4e7ed;
 Rahmenradius: 5px;
 Cursor: Zeiger;
}
.Schieberegler .Prozess {
 Position: absolut;
 links: 0;
 oben: 0;
 Breite: 112px;
 Höhe: 10px;
 Rahmenradius: 5px;
 Hintergrund: #81b159;
}
.slider .thunk {
 Position: absolut;
 links: 100px;
 oben: -7px;
 Breite: 20px;
 Höhe: 20px;
}
.Schieberegler .block {
 Breite: 20px;
 Höhe: 20px;
 Randradius: 50 %;
 Rand: 2px durchgezogen #409eff;
 Hintergrund: rgba(255, 255, 255, 1);
 Übergang: 0,2 s alles;
}
.Schieberegler .Tipps {
 Position: absolut;
 links: -7px;
 unten: 30px;
 Mindestbreite: 15px;
 Textausrichtung: zentriert;
 Polsterung: 4px 8px;
 /* Hintergrund: #000; */
 Rahmenradius: 5px;
 Höhe: 24px;
 Farbe: #fff;
}
.slider .tipps ich {
 Position: absolut;
 Rand links: -5px;
 links: 50%;
 unten: -9px;
 Schriftgröße: 16px;
 Farbe: #000;
}
.slider .block:hover {
 transformieren: Skalierung(1.1);
 Deckkraft: 0,6;
}
</Stil>

<Vorlage>
 <slider :min="0" :max="100" v-model="pro"></slider>
</Vorlage>

<Skript>
Schieberegler aus „@/components/slider“ importieren;
Standard exportieren {
 Daten() {
  zurückkehren {};
 },
 berechnet: {
  pro:
   erhalten() {
    gebe 0 zurück;
   },
   setze(Wert) {
    konsole.log(Wert);
   },
  },
 },
 Komponenten: {Schieberegler},
 montiert() {},
 Methoden: {},
};
</Skript>

<Stil>
</Stil>