Erstellen eines Donut-förmigen Fortschrittsbalkens in Vue.js

Einleitung:

In diesem Tutorial erfahren Sie, wie Sie einen Donut-förmigen Fortschrittsbalken in Vue.js erstellen. Fortschrittsbalken werden häufig verwendet, um den Fertigstellungsstatus einer Aufgabe anzuzeigen oder den Fortschritt einer laufenden Aufgabe anzuzeigen. Ein donutförmiger Fortschrittsbalken ist eine einzigartige und stilvolle Art, den Fortschritt anzuzeigen. In diesem Tutorial werden wir Vue.js und SVG verwenden, um einen donutförmigen Fortschrittsbalken zu erstellen.

Schritt 1: Erstellen einer Vue.js-Komponente

Der erste Schritt besteht darin, eine neue Vue.js-Komponente zu erstellen. Diese Komponente enthält den Code für den donutförmigen Fortschrittsbalken. Um eine neue Komponente in Vue.js zu erstellen, müssen Sie eine .vue-Datei erstellen. In diesem Tutorial werden wir unsere Komponente "DonutProgress.vue" nennen.

Schritt 2: Definieren Sie die Vorlage für die Komponente

Wir verwenden den Vorlagenabschnitt der Komponente, um ihre Struktur und ihr Layout zu definieren. Insbesondere verwenden wir SVG, um den ringförmigen Fortschrittsbalken zu erstellen. Infolgedessen ist der Vorlagencode wie folgt:

<template>
  <div>
    <svg viewBox="0 0 40 40" width="40" height="40">
      <circle cx="20" cy="20" r="16" fill="transparent" stroke="gray" stroke-width="8" />
      <circle cx="20" cy="20" r="16" fill="transparent" stroke="#30efa6" stroke-width="8"
      :stroke-dasharray="circumference" :stroke-dashoffset="progressOffset" />
    </svg>
  </div>
</template>

In der Vorlage erstellen wir zwei Kreise. Der erste Kreis ist ein grauer Kreis, der als Hintergrund für den Fortschrittsbalken dient. Der zweite Kreis ist ein grüner Kreis, der den Fortschritt anzeigt. Wir können die Größe und Position der Kreise mit den Attributen cx, cy und r definieren und mit dem Attribut stroke die Farbe des Kreises und das Attribut stroke-width angeben, um die Breite des Kreises zu bestimmen.

Schritt 3: Skript für die Komponente definieren

Wir können die Logik für die Komponente mithilfe des Skriptabschnitts definieren. In diesem Fall verwenden wir die berechneten Eigenschaften von Vue.js, um den Fortschritt des Fortschrittsbalkens zu berechnen. Der Skriptcode lautet wie folgt:

<script>
export default {
name: 'DonutProgress',
  props: {
    totalProgress: {
      type: Number,
      default: 100
    },
    progressCount: {
      type: Number,
      default: 0
    }
  },
  computed: {
    percentage() {
      return (this.progressCount / this.totalProgress) * 100;
    },
    circumference() {
      return 2 * Math.PI * 16;
    },
    progressOffset() {
      return this.circumference - (this.percentage / 100) * this.circumference + (1 - this.percentage / 100) * this.circumference;
    }
  }
};
</script>

Im Skript definieren wir zwei Requisiten: totalProgress und progressCount. Diese Requisiten werden verwendet, um den Gesamtfortschritt und den aktuellen Fortschritt der Fortschrittsanzeige festzulegen. Wir definieren auch drei berechnete Eigenschaften: Prozentsatz, Umfang und progressOffset. Die berechnete prozentuale Eigenschaft berechnet den Fortschritt des Fortschrittsbalkens als Prozentsatz. Die umfangsberechnete Eigenschaft berechnet den Umfang des ringförmigen Fortschrittsbalkens. Die berechnete Eigenschaft progressOffset berechnet den Fortschrittsversatz, der verwendet wird, um den Fortschritt des Fortschrittsbalkens anzuzeigen.

Schritt 4: Definieren Sie den Stil für die Komponente

Der Stilabschnitt der Komponente wird verwendet, um den Stil für die Komponente zu definieren. In diesem Fall definieren wir einen Übergangseffekt für den Fortschrittsbalken. Der Style-Code lautet wie folgt:

<style scoped>
circle {
  transition: stroke-dashoffset 0.3s ease;
}
</style>

Im Stil definieren wir einen Übergangseffekt für das Kreiselement. Der Übergangseffekt macht den Fortschrittsbalken glatt und animiert.

Schritt 5: Verwenden Sie die Komponente in Ihrer Vue.js-Anwendung

Sobald die Komponente erstellt ist, können Sie sie in Ihrer Vue.js-Anwendung verwenden. Um die Komponente zu verwenden, müssen Sie sie in Ihre main.js-Datei importieren. Der Code für den Import der Komponente lautet wie folgt:

import DonutProgress from './components/DonutProgress.vue'

new Vue({
  el: '#app',
  components: {
    DonutProgress
  }
})

In der Datei main.js importieren wir die DonutProgress-Komponente und registrieren sie als Komponente in der Vue-Instanz. Jetzt können Sie die Komponente in Ihrer HTML-Vorlage verwenden, indem Sie das Komponenten-Tag verwenden. Der Code für die Verwendung der Komponente lautet wie folgt:

<template>
  <div>
    <DonutProgress :totalProgress="100" :progressCount="50"></DonutProgress>
  </div>
</template>

In der HTML-Vorlage verwenden wir die DonutProgress-Komponente und setzen den Gesamtfortschritt auf 100 und die Fortschrittszahl auf 50. Dadurch wird ein ringförmiger Fortschrittsbalken mit 50 % Fortschritt angezeigt.

Fazit

Zusammenfassend lässt sich sagen, dass die Erstellung eines donutförmigen Fortschrittsbalkens in Vue.js eine großartige Möglichkeit ist, den Fortschritt auf stilvolle und einzigartige Weise visuell darzustellen. Mit den in diesem Tutorial beschriebenen Schritten sollten Sie in der Lage sein, ganz einfach einen benutzerdefinierten Fortschrittsbalken zu erstellen, der den spezifischen Anforderungen Ihres Projekts entspricht. Wenn Sie Fragen haben oder auf Probleme stoßen, können Sie sich gerne an dieses Tutorial wenden, um zusätzliche Unterstützung zu erhalten.