Praktische Fallanalyse der Progressbar-Komponente

Dieses Mal werde ich Ihnen eine praktische Fallanalyse der Fortschrittsbalkenkomponente vorstellen. Was sind die Vorsichtsmaßnahmen für die tatsächliche Verwendung der Fortschrittsbalkenkomponente? Das Folgende ist ein praktischer Fall.

Rendering

Werfen wir zunächst einen Blick auf die Wirkung der Fortschrittsbalkenkomponente, wie unten gezeigt

Fortschrittsbalkenkomponente

Implementierungsprozess

◾ Projektkonstruktion

Die Fortschrittsbalkenkomponente befindet sich in einem npm-Paket, das direkt ausgeführt, über Yeoman erstellt und dann erstellt werden kann Das über Gulp + Webpack erstellte Arbeitsverzeichnis lautet wie folgt, und der Inhalt jedes Ordners ist derselbe wie im vorherigen Artikel

Arbeitsverzeichnis der Fortschrittsbalkenkomponente

◾ Fortschrittsbalken-Quelldateivorlage

Die Fortschrittsbalkenkomponente liegt in Form einer .vue-Datei vor und der Vorlagenteil sieht wie folgt aus

Die Vorlage Teil der Fortschrittsbalken-Quelldatei

Wir können analysieren Schauen Sie sich an, die Fortschrittsbalkenkomponente hat hauptsächlich diese Attribute:

1. Typ, gesteuert durch Typvariablen wie Warnung, Gefahr, Erfolg, Info usw.;

2. Ob es dynamisch ist, verwenden Sie die animierte Variable zur Steuerung

3. Der aktuelle Wert, Verwendung die zu steuernde Wertvariable;

4. Der Maximalwert, verwenden Sie die Maximalvariable.

5. Prozentsatz, gesteuert durch die Prozentvariable berechnet durch Wert- und Maximalwerte, ist ein berechnetes Attribut von Vue

6. Der angezeigte Prozentwert wird durch den valueText-Wert gesteuert und ist eine berechnete Eigenschaft von Vue

◾ Skript der Fortschrittsbalken-Quelldatei

Der Skriptteil der Fortschrittsbalken-Komponente

◾ Der Stil der Fortschrittsbalken-Komponente

Der Stilteil hat viel Inhalt. Schauen wir uns zunächst die grundlegenden CSS-Attribute von Progressbar an, einschließlich der Fortschritts- und Fortschrittsbalkenteile

Grundlegender CSS-Teil

Dann schauen Sie sich die CSS-Stile an, die verschiedene Farben darstellen

Die CSS-Stile, die Farben darstellen

Zum Schluss werfen wir einen Blick darauf der CSS-Stil für Animationseffekte

CSS-Stil für Animationseffekte

◾ Beispiel

Nach Abschluss der oben genannten Schritte können Sie a Schauen wir uns als nächstes die Verwendung der Progressbar-Komponente an. Wenn sie ausgeführt werden kann, können Sie die Wirkung des Artikels am Anfang sehen.

Verwendung der Fortschrittsbalkenkomponente

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verschlüsseln und entschlüsseln Sie base64

Wie Sie JS verwenden, um die Daten des letzten zu erhalten 7 Tage und die letzten 3 Tage

Das obige ist der detaillierte Inhalt vonPraktische Fallanalyse der Progressbar-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!