Tutoriel de base VUE3 : Utiliser le plug-in Vue.js pour encapsuler le composant de la barre de progression

Dans le développement Web, le composant de barre de progression est un composant d'interface utilisateur courant utilisé pour afficher la progression d'une tâche ou du chargement d'une page. Dans Vue.js, grâce à sa puissante fonctionnalité de création de composants, nous pouvons facilement encapsuler des composants de barre de progression personnalisés et les encapsuler sous forme de plug-ins pour les réutiliser dans diverses applications Vue.js. Cet article montrera comment utiliser le plug-in Vue.js pour encapsuler le composant de barre de progression via un exemple complet de composant de barre de progression Vue.js.

Tutoriel de base VUE3 : Utilisez le plug-in Vue.js pour encapsuler le composant de barre de progression

1 Première introduction au composant de barre de progression Vue.js

Le composant de barre de progression Vue.js n'est pas seulement un simple composant d'interface utilisateur. , mais aussi un système de gestion backend. Un composant essentiel et important. Aujourd'hui, nous allons utiliser une démonstration du composant de barre de progression Vue.js pour apprendre à utiliser le plug-in Vue.js pour encapsuler le composant de barre de progression.

Tout d'abord, nous devons définir un composant de barre de progression, qui comprend 3 composants principaux : la barre de progression supérieure, la barre de progression inférieure et l'icône d'état de droite. Voici l'extrait de code HTML et CSS de ce composant :

<div class="progress">
  <div class="progress-top"></div>
  <div class="progress-bottom"></div>
  <i class="icon"></i>
</div>

.progress {
  position: relative;
  height: 14px;
  margin: 5px 0;
  border-radius: 6px;
  background-color: #f2f2f2;
}

.progress-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #5e72e4;
  transition: width .2s ease-in-out;
  z-index: 2;
}

.progress-bottom {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  background-color: #fff;
  transition: width .2s ease-in-out;
  z-index: 1;
}

.icon {
  position: absolute;
  top: -5px;
  right: -10px;
  font-size: 18px;
  color: #5e72e4;
}

La fonction correspondante de ce composant est d'afficher une barre de progression et fournit deux paramètres : la valeur est utilisée pour ajuster la largeur de la barre de progression (0 ~ 100), et la couleur est utilisée pour ajuster la progression. La couleur de la barre.

2. Utilisez Vue.js pour implémenter la logique de base du composant de barre de progression

Ensuite, nous utilisons Vue.js pour lier les données dynamiques du composant de barre de progression et implémenter la logique de base du composant.

Tout d'abord, nous définissons deux variables dans l'attribut data du composant Vue : progressValue et progressColor. Le premier est utilisé pour lier la largeur de la barre de progression et le second est utilisé pour lier la couleur de la barre de progression.

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  }
  
  // ...组件的其他属性和方法
}

Ensuite, dans l'attribut template du composant, nous rendons dynamiquement le code HTML du composant barre de progression en fonction des variables définies dans l'attribut data. Principalement en liant la valeur de progressValue, la largeur de la barre de progression change dynamiquement à mesure que les données sont mises à jour :

<template>
  <div class="progress">
    <div class="progress-top" :style="{ width: progressValue + '%' }"></div>
    <div class="progress-bottom"></div>
    <i class="icon" :class="['fa', 'fa-circle-o-notch', 'spin', 'text-'+progressColor]"></i>
  </div>
</template>

Enfin, dans l'attribut méthodes du composant, nous définissons une méthode de mise à jour, dans laquelle les requêtes asynchrones sont effectuées via Ajax Get les données initiales de la barre de progression actuelle et appelez la méthode updateProgress pour mettre à jour les données du composant :

export default {
  name: 'Progress',
  data() {
    return {
      progressValue: 0,
      progressColor: '#5e72e4'
    }
  },
  methods: {
    update() {
      // 模拟Ajax异步请求
      // 返回progressValue范围在0~100之间的随机数
      const progressValue = Math.floor(Math.random() * 100);
      if(progressValue > 0 && progressValue < 100) {
        this.updateProgress(progressValue, this.progressColor);
      }
    },
    updateProgress(value, color) {
      this.progressValue = value;
      this.progressColor = color;
    }
  }
}

Désormais, notre composant de barre de progression Vue.js peut transmettre la méthode de mise à jour et implémenter la liaison de données de base et les mises à jour dynamiques.

3. Utilisez le plug-in Vue.js pour encapsuler le composant de barre de progression

Après l'implémentation simple précédente, nous avons obtenu un code de composant de barre de progression Vue.js utilisable. Ensuite, nous encapsulerons ce code dans un plug-in Vue.js.

Tout d'abord, nous devons créer un nouveau plug-in VProgress dans notre projet Vue.js et définir la méthode d'installation globale dans le fichier index.js du plug-in pour enregistrer le composant de la barre de progression Vue.js :

import VProgress from './vprogress.vue';

const install = function(Vue) {
  Vue.component(VProgress.name, VProgress);
}

export default install;

Sur cette base, nous pouvons également fournir des éléments de configuration globale supplémentaires et des méthodes d'enregistrement globales pour le plug-in. Par exemple, nous définissons un élément de configuration globale pour ce plug-in :

import VProgress from './vprogress.vue';

const defaults = {
  color: '#5e72e4',
  delay: 1000
};

const install = function(Vue, options = {}) {
  const { color, delay } = Object.assign({}, options, defaults);

  Vue.prototype.$vprogress = {
    update(value) {
      VProgress.methods.updateProgress.call({ progressColor: color }, value, color);
    },
    delay
  };

  Vue.component(VProgress.name, VProgress);
}

export default install;

Nous ajoutons un élément de configuration globale pour ce plug-in. La couleur par défaut est la couleur de la barre de progression, et le délai est l'intervalle entre deux mises à jour. Chaque fois que nous mettons à jour la barre de progression, nous pouvons mettre à jour la valeur et les valeurs de couleur de la barre de progression via des méthodes globales telles que la méthode Vue.prototype.$vprogress.update, et nous pouvons contrôler l'intervalle de mise à jour via Vue.prototype. $vprogress.temps de retard.

Enfin, nous emballons le code ci-dessus et générons une instance de plug-in VProgress utilisable dans divers projets Vue.js.

4. Utilisation du composant de barre de progression Vue.js

Maintenant, nous utilisons le plug-in VProgress dans le nouveau projet Vue.js. La méthode d'utilisation est très simple. Il suffit de s'inscrire via la méthode Vue.use() dans le fichier d'entrée main.js de l'application Vue :

import Vue from 'vue';
import VProgress from 'vprogress';

Vue.use(VProgress, {
  color: '#e74c3c',
  delay: 500
});

Ici, on peut également passer un objet option via Vue. méthode use(), pour remplacer les éléments de configuration par défaut du plug-in VProgress.

Ensuite, dans le modèle, il suffit d'utiliser directement le composant VProgress et d'appeler la méthode $vporgress.update pour mettre à jour la valeur et la valeur de couleur de la barre de progression :

<template>
  <div class="app">
    <v-progress></v-progress>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    const { update, delay } = this.$vprogress;
    setInterval(() => {
      const value = Math.round(Math.random() * 100);
      update(value);
    }, delay)
  }
}
</script>

Nous utilisons la méthode setInterval pour mettre à jour automatiquement la valeur et l'intervalle de la barre de progression. Le temps est fixé par $vprogress.delay. Chaque fois que la barre de progression met à jour les données, la valeur et les paramètres de couleur de la barre de progression seront automatiquement mis à jour en conséquence. aux éléments de configuration globale du plug-in et aux éléments de configuration locaux du projet et au temps de retard.

5. Résumé

Grâce à la démonstration ci-dessus, nous avons appris à utiliser le plug-in Vue.js pour encapsuler le composant de la barre de progression et le réutiliser dans l'application Vue.js. Les exemples de code de cet article sont destinés à aider les lecteurs qui débutent avec Vue.js à comprendre rapidement les méthodes d'implémentation de base des plug-ins Vue.js et la logique d'implémentation de base du composant de barre de progression, jetant ainsi les bases du développement ultérieur de modules personnalisés. composants et plug-ins.

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!