在前端开发中，我们经常需要使用到倒计时功能，例如秒杀活动、限时折扣等。在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组件注册为全局组件。这样，在其他组件中就可以直接使用倒计时组件了。
大小仅1兆左右 ，足够轻便的商城系统； 易部署，上传空间即可用，安全，稳定； 容易操作，登陆后台就可设置装饰网站； 并且使用异步技术处理网站数据，表现更具美感。 前台呈现页面，兼容主流浏览器，DIV+CSS页面设计； 如果您有一定的网页设计基础，还可以进行简易的样式修改，二次开发， 发布新样式，调整网站结构，只需修改css目录中的css.css文件即可。 商城网站完全独立，网站源码随时可供您下载
立即学习“前端免费学习笔记（深入）”；
三、使用插件
现在，我们可以将封装好的倒计时插件用于具体的业务场景中。在组件中，我们需要先使用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插件，使其变得更加便捷和可复用。在实际项目中，我们可以根据实际业务需求，定制化这个组件，使其更加符合实际需求。
