L'indicateur Vue est un composant utilisé pour afficher la progression du chargement ou du traitement des pages. C'est très utile car il fournit des commentaires indiquant à l'utilisateur ce qu'il attend et combien de temps il doit attendre. Dans cet article, nous présenterons comment utiliser les indicateurs Vue.
Avant de commencer à utiliser Vue Indicator, vous devez l'installer. Plusieurs options sont disponibles, en fonction des exigences et des besoins de votre projet. Une option consiste à installer via le gestionnaire de packages npm.
Exécutez la commande suivante dans le terminal pour installer vue-spinner :
npm install vue-spinner --save
Si votre projet utilise fil comme gestionnaire de packages, vous pouvez également utiliser la commande suivante pour l'installer :
yarn add vue-spinner
Une fois vue- Le spinner a été installé, vous devez maintenant l'introduire dans votre composant Vue. Vous pouvez l'introduire dans un composant spécifique, au niveau de la page, ou dans le fichier d'entrée de l'application.
Normalement, vous l'introduirez dans une balise de script comme celle-ci :
<template>
<div>
<BounceLoader />
</div>
</template>
<script>
import { BounceLoader } from 'vue-spinner'
export default {
components: {
BounceLoader
}
}
</script>
Dans cet exemple, nous avons utilisé un div de conteneur très simple dans le modèle et ajouté un BounceLoader. Dans la balise script, nous indiquons d’abord clairement que nous faisons référence au composant BounceLoader de vue-spinner. Nous l'ajoutons ensuite en tant que composant à notre composant actuel.
Après avoir introduit vue-spinner dans votre composant Vue, vous pouvez désormais l'utiliser directement dans le modèle. Nous allons montrer ici un exemple où le composant BounceLoader est utilisé. Il s'agit d'un très bel indicateur de chargement animé qui apparaîtra lors du chargement d'un autre contenu.
<template>
<div>
<BounceLoader />
<p>内容正在加载，请稍候...</p>
</div>
</template>Dans ce code, nous enveloppons le composant BounceLoader dans un simple div et ajoutons un texte descriptif en dessous pour indiquer à l'utilisateur ce qu'il charge.
C'est simple, vous pouvez utiliser des indicateurs plus complexes au lieu du simple BounceLoader si vous le souhaitez.
Les indicateurs Vue sont hautement personnalisables. Vous pouvez personnaliser la taille, la couleur, la vitesse, etc. de l'indicateur en définissant différents paramètres. Voici quelques paramètres couramment utilisés :
| Nom | Type | Valeur par défaut | Description |
|---|---|---|---|
| taille | Numéro | 35 | La taille de l'indicateur en pixels |
| 0 | Rayon de coin de l'indicateur | loadingText | |
| 'Loading...' | Si l'indicateur affiche des invites de texte | loadingTextStyle | |
| {} | Styles de texte personnalisables | ||
| Dans cet exemple, nous définissons d'abord un conteneur div qui entoure le composant BounceLoader et définissons des styles pour celui-ci. Nous avons défini la hauteur sur 100vh et centré le composant BounceLoader à l'aide de la disposition flexbox. Nous définissons également certaines propriétés personnalisées utilisées, telles que la taille, la couleur, les marges, etc. | Pour résumer, les indicateurs Vue sont un outil très utile pour informer vos utilisateurs de ce qui se passe. Les indicateurs Vue sont disponibles dans de nombreux styles et tailles différents, adaptés à une utilisation dans différents types de projets. Vous pouvez personnaliser votre indicateur à l'aide de propriétés personnalisées pour obtenir un aspect qui correspond à votre style de conception. |
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
