VUE3 development basics: Use the Vue.js plug-in to encapsulate the countdown component

In front-end development, we often need to use countdown functions, such as flash sales activities, limited-time discounts, etc. In Vue.js 3.0, due to the emergence of Composition API, we can more easily encapsulate reusable components. This article will introduce how to use the Vue.js plug-in to encapsulate a reusable countdown component.

1. Create a countdown component

First, create a CountDown.vue component in the src/components/ directory:

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

This component accepts a prop named endTime, Indicates the end time of the countdown. In the component, we use the Composition API in Vue.js 3.0 to calculate the countdown and turn the countdown on and off during the mounted and unmounted life cycles. Among them, the calcCountDownTime function is responsible for calculating the countdown, the formatTime function is responsible for formatting the time, and intervalId is used to mark the timer.

2. Encapsulation plug-in

Next, we encapsulate the countdown component into a Vue.js plug-in. Create a countdown.js file in the src/plugins/ directory:

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

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

export default CountdownPlugin;

In the plug-in, we use the app.component method to register the CountDown component as a global component. In this way, the countdown component can be used directly in other components.

3. Using plug-ins

Now, we can use the encapsulated countdown plug-in in specific business scenarios. In the component, we need to first use the Vue.js plug-in to register the countdown component, and then we can use the CountDown component in the template. For example, in the Home.vue component:

<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 this example, we use the CountdownPlugin plug-in in the mounted hook function to register the CountDown component, and then use the CountDown component in the template and pass a value called endTime prop, indicating the end time of the countdown.

At this point, we have successfully encapsulated a countdown component and encapsulated it into a Vue.js plug-in, making it more convenient and reusable. In actual projects, we can customize this component according to actual business needs to make it more in line with actual needs.

The above is the detailed content of VUE3 development basics: Use the Vue.js plug-in to encapsulate the countdown component. For more information, please follow other related articles on the PHP Chinese website!