Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue

<Vorlage>
 <div Klasse="Inhalt" ref="Box">
 <svg style="transform: drehen(-90°)" :width="Breite" :height="Breite" xmlns="http://www.w3.org/2000/svg">
  <Kreis :r="(Breite-Radius)/2"
  :cy="Breite/2"
  :cx="Breite/2"
  :Strichbreite="Radius"
  :Strich="Hintergrundfarbe"
  füllen="keine"
  />
  <Kreis ref="$bar"
  :r="(Breite-Radius)/2"
  :cy="Breite/2"
  :cx="Breite/2"
  :Strich="Balkenfarbe"
  :Strichbreite="Radius"
  :stroke-linecap="istRund ? 'rund' : 'quadratisch'"
  :stroke-dasharray="(Breite-Radius)*3,14"
  :stroke-dashoffset="isAnimation ? (Breite-Radius) * 3,14 : (Breite - Radius) * 3,14 * (100 - Fortschritt) / 100"
  füllen="keine"
  />
 </svg>
 <div Klasse="center_text" :style="{Farbe, Schriftgröße}">
  <p v-if="!$slots.default" class="title">{{Fortschritt}}%</p>
  <Steckplatz></Steckplatz>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: {
 Radius:
  Typ: [Zahl, Zeichenfolge],
  Standard: 20
 }, // Dicke des Fortschrittsbalkens progress: {
  Typ: [Zahl, Zeichenfolge],
  Standard: 20
 }, // Fortschrittsbalken in Prozent barColor: {
  Typ: Zeichenfolge,
  Standard: "#1890ff"
 }, // Farbe des Fortschrittsbalkens backgroundColor: {
  Typ: Zeichenfolge,
  Standard: "rgba(0,0,0,0.3)"
 }, // Hintergrundfarbe isAnimation: {
  // Ist es ein Animationseffekttyp: Boolean,
  Standard: true
 },
 istRunde: {
  // Ist es ein Rundpinsel Typ: Boolean,
  Standard: true
 },
 Ausweis: {
  // Komponenten-ID, wird verwendet, wenn mehrere Komponenten nebeneinander existieren. Typ: [String, Number],
  Standard: 1
 },
 Dauer: {
  // Die gesamte Animationsdauer Typ: [String, Number],
  Standard: 1000
 },
 Verzögerung:
  // Wie lange soll die Ausführung verzögert werden? Typ: [String, Number],
  Standard: 200
 },
 Zeitfunktion: {
  // Animation-Easing-Funktionstyp: String,
  Standard: „cubic-bezier(0.99, 0.01, 0.22, 0.94)“
 },
 Kreisbreite: {
  //Ringbreitentyp: Zahl,
  Standard: 100,
 },
 Farbe:
  //Textfarbtyp: String,
  Standard: „#000“
 },
 Schriftgröße: {
  //Textgrößentyp: String,
  Standard: „18px“
 }
 },
 Daten() {
 zurückkehren {
  Breite: diese.Kreisbreite,
  idStr: `circle_progress_keyframes_${this.id}`
 };
 },
 vorZerstören() {
 // Lösche das Style-Tag der alten Komponente document.getElementById(this.idStr) &&
 document.getElementById(this.idStr).remove();
 window.addEventListener(() => {});
 },
 montiert() {
 lass self = dies;
 this.setCircleWidth();
 dies.setAnimation();
 // window.onresize kann hier nicht verwendet werden
 Fenster.addEventListener(
  "Größe ändern",
  Entprellung(Funktion() {
  self.setCircleWidth();
  selbst. setAnimation(selbst);
  }, 300)
 );
 },
 Methoden: {
 setzeKreisbreite() {
  lass box = diese.$refs.box;
  let width = box.clientWidth;
  lass Höhe = Box.ClientHeight;
  sei cW = Breite > Höhe? Höhe : Breite;
  diese.Breite = cW;
 },
 setAnimation() {
  lass self = dies;
  wenn (self.isAnimation) {
  // Wiederholen Sie die Definition if (document.getElementById(self.idStr)) {
   console.warn("vue-circle-progress sollte nicht denselben ID-Stil haben");
   document.getElementById(self.idStr).remove();
  }
  // Datei mit Animationsstil generieren let style = document.createElement("style");
  Stil.id = self.idStr;
  Stil.Typ = "Text/CSS";
  style.innerHTML = `
  @keyframes Kreis_Fortschritt_keyframes_name_${self.id} {
  von {stroke-dashoffset: ${(self.width - self.radius) * 3.14}px;}
  zu {stroke-dashoffset: ${((self.width - self.radius) *
  3,14 *
  (100 - eigener Fortschritt)) /
  100}px;}}
  .circle_progress_bar${
  selbst.id
  } {Animation: Kreis_Fortschritt_Keyframes_Name_${self.id} ${
   selbst.dauer
  }ms ${self.delay}ms ${self.timeFunction} vorwärts;}`;
  // Eine neue Stildatei hinzufügen document.getElementsByTagName("head")[0].appendChild(style);
  // Animationsklasse zum SVG-Element hinzufügen
  self.$refs.$bar.classList.add(`circle_progress_bar${self.id}`);
  }
 }
 }
};
</Skript>
<Stilbereich>
.Inhalt {Höhe: 100 %; Anzeige: Flex; Inhalt ausrichten: Mitte; Elemente ausrichten: Mitte;}
.center_text {position:absolut;}
</Stil>

<CircleProgress :id="'circle1'" :circleWidth="40" :radius="7" :progress="30" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF4F4F'" />
<CircleProgress :id="'circle2'" :circleWidth="40" :radius="7" :progress="50" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF902A'" />
<CircleProgress :id="'circle3'" :circleWidth="40" :radius="7" :progress="89" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FFDB4F'" />
<CircleProgress :id="'circle4'" :circleWidth="40" :radius="7" :progress="25" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#B8D87E'" />

Funktion Entprellung(func, wait, immediately) {
 let timeout, args, context, timestamp, result

 const später = Funktion () {
 // Entsprechend dem letzten Trigger-Zeitintervall const last = +new Date() - Zeitstempel

 // Das letzte Mal, als die gewrappte Funktion aufgerufen wurde, ist das Zeitintervall last kürzer als das eingestellte Zeitintervall wait
 wenn (letzter < warten && letzter > 0) {
  Timeout = setTimeout(später, warten - zuletzt)
 } anders {
  Timeout = null
  // Wenn auf immediate===true gesetzt, muss es hier nicht aufgerufen werden, weil die Startgrenze bereits aufgerufen wurde if (!immediate) {
  Ergebnis = func.apply(Kontext, Argumente)
  wenn (!timeout) Kontext = Argumente = null
  }
 }
 }