Vue-Indikator ist eine Komponente, die verwendet wird, um den Fortschritt des Ladens oder Verarbeitens einer Seite anzuzeigen. Dies ist sehr nützlich, da es dem Benutzer Feedback gibt, worauf er wartet und wie lange er warten muss. In diesem Artikel stellen wir die Verwendung von Vue-Indikatoren vor.
Bevor Sie Vue Indicator verwenden, müssen Sie es installieren. Abhängig von den Anforderungen und Bedürfnissen Ihres Projekts stehen Ihnen mehrere Optionen zur Verfügung. Eine Möglichkeit ist die Installation über den npm-Paketmanager.
Führen Sie den folgenden Befehl im Terminal aus, um Vue-Spinner zu installieren:
npm install vue-spinner --save
Wenn Ihr Projekt Garn als Paketmanager verwendet, können Sie es auch mit dem folgenden Befehl installieren:
yarn add vue-spinner
Once vue – Der Spinner wurde installiert, jetzt müssen Sie ihn in Ihre Vue-Komponente einführen. Sie können es in einer bestimmten Komponente, auf Seitenebene oder in der Eintragsdatei der App einführen.
Normalerweise würden Sie es in einem Skript-Tag wie diesem einführen:
<template>
<div>
<BounceLoader />
</div>
</template>
<script>
import { BounceLoader } from 'vue-spinner'
export default {
components: {
BounceLoader
}
}
</script>
In diesem Beispiel haben wir ein sehr einfaches Container-Div in der Vorlage verwendet und einen BounceLoader hinzugefügt. Im Skript-Tag machen wir zunächst deutlich, dass wir auf die BounceLoader-Komponente von vue-spinner verweisen. Anschließend fügen wir es als Komponente zu unserer aktuellen Komponente hinzu.
Nachdem Sie den Vue-Spinner in Ihrer Vue-Komponente eingeführt haben, können Sie ihn jetzt direkt in der Vorlage verwenden. Wir zeigen hier ein Beispiel, bei dem die BounceLoader-Komponente verwendet wird. Dies ist eine sehr schöne animierte Ladeanzeige, die angezeigt wird, wenn andere Inhalte geladen werden.
<template>
<div>
<BounceLoader />
<p>内容正在加载，请稍候...</p>
</div>
</template>In diesem Code verpacken wir die BounceLoader-Komponente in ein einfaches Div und fügen darunter einen beschreibenden Text hinzu, um dem Benutzer mitzuteilen, was sie lädt.
Es ist ganz einfach: Sie können bei Bedarf komplexere Indikatoren anstelle nur von BounceLoader verwenden.
Vue-Indikatoren sind in hohem Maße anpassbar. Sie können die Größe, Farbe, Geschwindigkeit usw. des Indikators anpassen, indem Sie verschiedene Parameter festlegen. Hier sind einige häufig verwendete Parameter:
| Name | Typ | Standardwert | Beschreibung |
|---|---|---|---|
| Größe | Nummer | 35 | Die Größe des Indikators Pixel |
| 0 | Eckradius des Indikators | loadingText | |
| 'Loading...' | Ob der Indikator Textaufforderungen anzeigt | loadingTextStyle | |
| {} | Anpassbare Textstile | ||
| In diesem Beispiel definieren wir zunächst einen div-Container, der die BounceLoader-Komponente umgibt, und definieren Stile dafür. Wir haben die Höhe auf 100 VH eingestellt und die BounceLoader-Komponente mithilfe des Flexbox-Layouts zentriert. Wir legen auch einige benutzerdefinierte Eigenschaften fest, z. B. Größe, Farbe, Ränder usw. | Zusammenfassend lässt sich sagen, dass Vue-Indikatoren ein sehr nützliches Werkzeug sind, um Ihre Benutzer darüber zu informieren, was vor sich geht. Vue-Indikatoren gibt es in vielen verschiedenen Stilen und Größen, die für den Einsatz in verschiedenen Arten von Projekten geeignet sind. Sie können Ihren Indikator mithilfe benutzerdefinierter Eigenschaften anpassen, um ein Erscheinungsbild zu erzielen, das Ihrem Designstil entspricht. |
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
