VUE3开发基础：使用Vue.js插件封装倒计时组件-Vue.js-PHP中文网

VUE3开发基础：使用Vue.js插件封装倒计时组件

WBOY

发布： 2023-06-16 10:21:07

原创

2416 人浏览过

在前端开发中，我们经常需要使用到倒计时功能，例如秒杀活动、限时折扣等。在Vue.js 3.0中，由于Composition API的出现，我们可以更加方便地封装可复用的组件。这篇文章将会介绍如何使用Vue.js插件来封装一个可复用的倒计时组件。

一、创建倒计时组件

首先，在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来计算倒计时，并在mounted和unmounted生命周期中开启和关闭倒计时。其中，calcCountDownTime函数负责计算倒计时，formatTime函数负责格式化时间，intervalId用于标记定时器。

二、封装插件

接着，我们将倒计时组件封装成一个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组件注册为全局组件。这样，在其他组件中就可以直接使用倒计时组件了。

三、使用插件

现在，我们可以将封装好的倒计时插件用于具体的业务场景中。在组件中，我们需要先使用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>

登录后复制

在这个例子中，我们在mounted钩子函数中使用CountdownPlugin插件来注册CountDown组件，然后在模板中使用CountDown组件，并传递一个名为endTime的prop，表示倒计时的结束时间。

到此，我们就成功地封装了一个倒计时组件，并将其封装成Vue.js插件，使其变得更加便捷和可复用。在实际项目中，我们可以根据实际业务需求，定制化这个组件，使其更加符合实际需求。

以上是VUE3开发基础：使用Vue.js插件封装倒计时组件的详细内容。更多信息请关注PHP中文网其他相关文章！