Basé surcet article. Il existe une solution simple mais limitée et une solution entièrement personnalisée.
Intégré
Contient une barre de progression de chargement qui peut être utilisée comme ceci
Mais il ne dispose que d'une interface utilisateur prédéfinie et ne peut être personnalisé qu'à l'aide de ces quelques propriétés
Couleur :La couleur de la barre de chargement.
Hauteur :Hauteur de la barre de chargement en pixels (la valeur par défaut est 3).
Durée :Durée de la barre de chargement en millisecondes (la valeur par défaut est 2000).
Limite :Limite d'affichage et de masquage en millisecondes (200 par défaut).
Chargeur personnalisable
Si vous avez besoin d'un chargeur personnalisé (comme un spinner plein écran avec arrière-plan), une approche différente est requise. Cette approche vous permet de créer n'importe quel chargeur et de l'afficher en cas de besoin.
Nuxt3 fournit des hooks d'exécution d'application qui contiennent des intercepteurs pour les événementspage:start和page:finish. Pour les utiliser correctement, vous devez utiliser ces hooks (dans app.vue ou votre composant personnalisé) de cette façon :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Basé surcet article. Il existe une solution simple mais limitée et une solution entièrement personnalisée.
Intégré
Mais il ne dispose que d'une interface utilisateur prédéfinie et ne peut être personnalisé qu'à l'aide de ces quelques propriétés
Chargeur personnalisable
Si vous avez besoin d'un chargeur personnalisé (comme un spinner plein écran avec arrière-plan), une approche différente est requise. Cette approche vous permet de créer n'importe quel chargeur et de l'afficher en cas de besoin.
Nuxt3 fournit des hooks d'exécution d'application qui contiennent des intercepteurs pour les événements
page:start和page:finish. Pour les utiliser correctement, vous devez utiliser ces hooks (dans app.vue ou votre composant personnalisé) de cette façon :