VUE3 開発の基本: Vue.js プラグインを使用してカウントダウン コンポーネントをカプセル化する

フロントエンド開発では、フラッシュセールや期間限定の割引など、カウントダウン機能を使用する必要があることがよくあります。 Vue.js 3.0 では、Composition API の登場により、再利用可能なコンポーネントをより簡単にカプセル化できるようになりました。この記事では、Vue.js プラグインを使用して再利用可能なカウントダウン コンポーネントをカプセル化する方法を紹介します。

1. カウントダウン コンポーネントを作成する

まず、src/components/ ディレクトリに CountDown.vue コンポーネントを作成します:

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

このコンポーネントは、endTime という名前の prop を受け入れます。カウントダウンの終了時刻。コンポーネントでは、Vue.js 3.0 の Composition API を使用してカウントダウンを計算し、マウントおよびアンマウントのライフ サイクル中にカウントダウンのオンとオフを切り替えます。このうち、calcCountDownTime 関数はカウントダウンの計算を担当し、formatTime 関数は時刻の書式設定を担当し、intervalId はタイマーをマークするために使用されます。

2. カプセル化プラグイン

次に、カウントダウン コンポーネントを Vue.js プラグインにカプセル化します。 src/plugins/ ディレクトリに countdown.js ファイルを作成します。

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

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

export default CountdownPlugin;

プラグインでは、app.component メソッドを使用して CountDown コンポーネントをグローバル コンポーネントとして登録します。このようにして、カウントダウン コンポーネントを他のコンポーネントで直接使用できます。

3. プラグインの使用

これで、カプセル化されたカウントダウン プラグインを特定のビジネス シナリオで使用できるようになります。コンポーネントでは、まず Vue.js プラグインを使用してカウントダウン コンポーネントを登録する必要があります。その後、テンプレートで CountDown コンポーネントを使用できるようになります。たとえば、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>

この例では、マウントされたフック関数で CountdownPlugin プラグインを使用して CountDown コンポーネントを登録し、テンプレートで CountDown コンポーネントを使用して渡します。 endTime プロパティと呼ばれる値。カウントダウンの終了時刻を示します。

この時点で、カウントダウン コンポーネントをカプセル化し、それを Vue.js プラグインにカプセル化することに成功し、より便利で再利用可能になりました。実際のプロジェクトでは、実際のビジネス ニーズに応じてこのコンポーネントをカスタマイズして、実際のニーズにさらに適合させることができます。

以上がVUE3 開発の基本: Vue.js プラグインを使用してカウントダウン コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。