Bases du développement VUE3 : utilisez le plug-in Vue.js pour encapsuler le composant de compte à rebours

Dans le développement front-end, nous devons souvent utiliser des fonctions de compte à rebours, telles que des activités de vente flash, des remises à durée limitée, etc. Dans Vue.js 3.0, grâce à l'émergence de l'API Composition, nous pouvons encapsuler plus facilement des composants réutilisables. Cet article explique comment utiliser le plug-in Vue.js pour encapsuler un composant de compte à rebours réutilisable.

1. Créez un composant de compte à rebours

Tout d'abord, créez un composant CountDown.vue dans le répertoire src/components/ :

<template>
  <div class="countdown">
    <span>{{ formatCountDownTime }}</span>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'CountDown',
  props: {
    endTime: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const countDownTime = ref('00:00:00');

    // 计算倒计时时间
    const calcCountDownTime = () => {
      const diff = Date.parse(props.endTime) - Date.parse(new Date());
      const seconds = Math.floor(diff / 1000);
      if (seconds <= 0) {
        countDownTime.value = '00:00:00';
        clearInterval(intervalId);
      } else {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds - hours * 3600) / 60);
        const leftSeconds = seconds - hours * 3600 - minutes * 60;
        countDownTime.value = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(leftSeconds)}`;
      }
    };
    
    // 格式化时间
    const formatTime = (time) => {
      return time < 10 ? `0${time}` : time;
    }

    let intervalId;

    onMounted(() => {
      calcCountDownTime();
      intervalId = setInterval(() => {
        calcCountDownTime();
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(intervalId);
    });

    return {
      countDownTime,
      formatCountDownTime: ref('00:00:00')
    };
  }
};
</script>

<style>
.countdown {
  font-size: 18px;
  font-weight: bold;
}
</style>

Ce composant accepte un accessoire nommé endTime, qui représente l'heure de fin du compte à rebours. Dans le composant, nous utilisons l'API Composition dans Vue.js 3.0 pour calculer le compte à rebours et activer et désactiver le compte à rebours pendant les cycles de vie montés et démontés. Parmi eux, la fonction calcCountDownTime est responsable du calcul du compte à rebours, la fonction formatTime est responsable du formatage de l'heure et intervalId est utilisé pour marquer la minuterie.

2. Encapsulation du plug-in

Ensuite, nous encapsulons le composant compte à rebours dans un plug-in Vue.js. Créez un fichier countdown.js dans le répertoire src/plugins/ :

import CountDown from '@/components/CountDown.vue';

const CountdownPlugin = {
  install(app) {
    app.component(CountDown.name, CountDown);
  }
};

export default CountdownPlugin;

Dans le plugin, nous utilisons la méthode app.component pour enregistrer le composant CountDown en tant que composant global. De cette manière, le composant compte à rebours peut être utilisé directement dans d’autres composants.

3. Utiliser des plug-ins

Désormais, nous pouvons utiliser le plug-in de compte à rebours encapsulé dans des scénarios commerciaux spécifiques. Dans le composant, nous devons d'abord utiliser le plug-in Vue.js pour enregistrer le composant de compte à rebours, puis nous pouvons utiliser le composant CountDown dans le modèle. Par exemple, dans le composant Home.vue :

<template>
  <div class="home">
    <CountDown :endTime="endTime" />
  </div>
</template>

<script>
import { ref } from 'vue';
import CountdownPlugin from '@/plugins/countdown.js';

export default {
  name: 'Home',
  setup() {
    const endTime = ref('2021-10-30 00:00:00');

    return {
      endTime
    };
  },
  mounted() {
    Vue.use(CountdownPlugin);
  }
};
</script>

<style>

</style>

Dans cet exemple, nous utilisons le plug-in CountdownPlugin dans la fonction hook montée pour enregistrer le composant CountDown, puis utilisons le composant CountDown dans le modèle et transmettons un accessoire nommé endTime pour représenter l’heure de fin du compte à rebours.

À ce stade, nous avons réussi à encapsuler un composant de compte à rebours et à l'encapsuler dans un plug-in Vue.js, le rendant plus pratique et réutilisable. Dans les projets réels, nous pouvons personnaliser ce composant en fonction des besoins réels de l'entreprise pour le rendre plus conforme aux besoins réels.

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!