Comment utiliser Vue pour implémenter les effets de chargement de la barre de progression

Comment utiliser Vue pour implémenter les effets de chargement de la barre de progression

Introduction :
Dans le développement front-end, les effets de chargement de la barre de progression sont une fonction courante et pratique, qui peut être utilisée pour afficher le téléchargement de fichiers, le chargement de données, le chargement de pages. et d'autres calendriers d'opérations. En tant que framework JavaScript populaire, Vue fournit une multitude d'outils et de composants pour implémenter facilement les effets de chargement de la barre de progression. Cet article expliquera comment utiliser Vue pour implémenter un simple effet de chargement de barre de progression et fournira des exemples de code spécifiques.

1. Présentation
L'effet de chargement de la barre de progression consiste généralement en un composant de barre de progression et un événement qui déclenche le chargement. Dans Vue, vous pouvez implémenter une barre de progression en définissant un composant global, et contrôler l'affichage et le masquage de la barre de progression via des méthodes dans l'instance Vue.

2. Étapes de mise en œuvre

1. Créez un projet Vue et installez les plug-ins Vue Router et ProgressBar.
2. Introduisez le composant de barre de progression et Vue Router dans App.vue, et configurez le composant de barre de progression en tant que composant global.
3. Définissez un front guard global dans le fichier de configuration de routage pour contrôler l'affichage et le masquage de la barre de progression.
4. Définissez une méthode dans les méthodes pour contrôler manuellement la progression du chargement de la barre de progression.
5. Ajoutez un bouton à la page pour déclencher le chargement de la barre de progression via un événement clic.

3. Démonstration d'étape spécifique

1. Créez un projet Vue et installez les plug-ins Vue Router et ProgressBar.
   Exécutez la commande suivante :

   vue create progress-bar-demo
   cd progress-bar-demo
   npm install vue-router
   npm install vue-progressbar

2. Introduisez le composant de barre de progression et Vue Router dans App.vue, et configurez le composant de barre de progression en tant que composant global.
   Ajoutez le code suivant dans App.vue :

   <template>
     <div id="app">
       <!-- ... -->
       <router-view></router-view>
       <vue-progress-bar></vue-progress-bar>
     </div>
   </template>
     
   <script>
   import VueProgressBar from 'vue-progressbar'
     
   export default {
     name: 'App',
     components: {
       VueProgressBar
     },
     // ...
   }
   </script>

3. Définissez un front guard global dans le fichier de configuration de routage pour contrôler l'affichage et le masquage de la barre de progression.
   Créez un dossier routeur dans le répertoire src, créez un fichier index.js et ajoutez le code suivant :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import VueProgressBar from 'vue-progressbar'
     
   Vue.use(VueRouter)
     
   const progressBarOptions = {
     color: '#29d',
     failedColor: 'red',
     thickness: '3px',
     transition: {
       speed: '0.5s',
       opacity: '0.6s',
       termination: 300
     },
     autoRevert: true,
     location: 'top',
     inverse: false
   }
     
   const router = new VueRouter({
     mode: 'history',
     routes: [
       // ...
     ]
   })
     
   router.beforeEach((to, from, next) => {
     VueProgressBar.start()
     next()
   })
     
   router.afterEach(() => {
     Vue.nextTick(() => {
       VueProgressBar.finish()
     })
   })
     
   export default router

4. Définissez une méthode dans les méthodes pour contrôler manuellement la progression du chargement de la barre de progression.
   Définissez une méthode dans n'importe quel composant, tel que Home.vue :

   <template>
     <div>
       <h1 id="Welcome-to-Home">Welcome to Home</h1>
       <button @click="startProgress">Start Progress</button>
     </div>
   </template>
     
   <script>
   export default {
     name: 'Home',
     methods: {
       startProgress() {
         VueProgressBar.start()
         // 模拟加载进度
         setTimeout(() => {
           VueProgressBar.finish()
         }, 2000)
       }
     }
   }
   </script>

5. Ajoutez un bouton à la page pour déclencher le chargement de la barre de progression via un événement de clic.
   Ajoutez un bouton à n'importe quelle page, telle que Home.vue :

   <template>
     <div>
       <h1 id="Welcome-to-Home">Welcome to Home</h1>
       <button @click="startProgress">Start Progress</button>
     </div>
   </template>
     
   <script>
   export default {
     name: 'Home',
     methods: {
       startProgress() {
         VueProgressBar.start()
         // 模拟加载进度
         setTimeout(() => {
           VueProgressBar.finish()
         }, 2000)
       }
     }
   }
   </script>

4. Résumé
Cet article présente les étapes spécifiques de l'utilisation de Vue pour implémenter l'effet de chargement de la barre de progression et fournit des exemples de code correspondants. Grâce à des composants globaux, des gardes avant globaux et un contrôle manuel de la progression du chargement de la barre de progression, nous pouvons facilement implémenter un effet de chargement simple de la barre de progression. J'espère que cet article pourra vous aider à implémenter la barre de progression chargeant les effets spéciaux dans votre projet Vue, et vous faciliter l'expansion et l'optimisation du développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!