Grundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um die Countdown-Komponente zu kapseln

In der Front-End-Entwicklung müssen wir häufig Countdown-Funktionen verwenden, z. B. Flash-Sales-Aktivitäten, zeitlich begrenzte Rabatte usw. In Vue.js 3.0 können wir aufgrund des Aufkommens der Composition API wiederverwendbare Komponenten einfacher kapseln. In diesem Artikel wird erläutert, wie Sie mit dem Vue.js-Plug-In eine wiederverwendbare Countdown-Komponente kapseln.

1. Erstellen Sie eine Countdown-Komponente

Erstellen Sie zunächst eine CountDown.vue-Komponente im Verzeichnis 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>

Diese Komponente akzeptiert eine Requisite namens endTime, die die Endzeit des Countdowns darstellt. In der Komponente verwenden wir die Composition API in Vue.js 3.0, um den Countdown zu berechnen und den Countdown während der gemounteten und nicht gemounteten Lebenszyklen ein- und auszuschalten. Unter diesen ist die Funktion calcCountDownTime für die Berechnung des Countdowns verantwortlich, die Funktion formatTime ist für die Formatierung der Zeit verantwortlich und die Intervall-ID wird zum Markieren des Timers verwendet.

2. Kapseln des Plug-Ins

Als nächstes kapseln wir die Countdown-Komponente in ein Vue.js-Plug-In. Erstellen Sie eine countdown.js-Datei im Verzeichnis src/plugins/:

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

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

export default CountdownPlugin;

Im Plug-in verwenden wir die app.component-Methode, um die CountDown-Komponente als globale Komponente zu registrieren. Auf diese Weise kann die Countdown-Komponente direkt in anderen Komponenten verwendet werden.

3. Plug-Ins verwenden

Jetzt können wir das gekapselte Countdown-Plug-In in bestimmten Geschäftsszenarien verwenden. In der Komponente müssen wir zuerst das Vue.js-Plug-In verwenden, um die Countdown-Komponente zu registrieren, und dann können wir die CountDown-Komponente in der Vorlage verwenden. Zum Beispiel in der Home.vue-Komponente:

<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>

In diesem Beispiel verwenden wir das CountdownPlugin-Plugin in der gemounteten Hook-Funktion, um die CountDown-Komponente zu registrieren, verwenden dann die CountDown-Komponente in der Vorlage und übergeben eine Requisite namens endTime um die Endzeit des Countdowns darzustellen.

Zu diesem Zeitpunkt haben wir erfolgreich eine Countdown-Komponente gekapselt und sie in ein Vue.js-Plug-In gekapselt, wodurch sie bequemer und wiederverwendbar ist. In tatsächlichen Projekten können wir diese Komponente an die tatsächlichen Geschäftsanforderungen anpassen, um sie besser an die tatsächlichen Anforderungen anzupassen.

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um die Countdown-Komponente zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!