vue 实现一个持续时间定时器组件

本文主要是介绍vue 实现一个持续时间定时器组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

子组件

新建一个timer.vue文件

<template><span :class="{red: string >= 600}">{{ string | formatDurationS }}</span>
</template>
<script>export default {name: 'timer',props: {startTimer: {type: [String, Number],default: 0},currentTimer: {type: [String, Number],default: 0}},data() {return {string: '--:--:--', // '00:00:00',step: 0,intervalName: ''}},watch: {currentTimer: {handler: function(nev, oldv) {if (this.intervalName) {clearInterval(this.intervalName)}this.step = this.startTimerlet _str = Math.round((this.currentTimer - this.startTimer) / 1000)this.string = _str < 0 ? 0 : _strthis.intervalName = setInterval(() => {this.string++}, 1000)},immediate: true}},beforeDestroy() {clearInterval(this.intervalName)this.intervalName = null}
}</script>
<style scoped lang="less">
.red {color: #F03E3E;
}
</style>

父组件

导入子组件并注册

<TIMER ref="timerFun" :currentTimer="timeStamp" :startTimer="item.actionTime"></TIMER>import TIMER from '@/components/timer.vue'timeStamp: Date.now(),components: {TIMER
}

• startTimer： 开始计时的时间戳
• currentTimer: 当前本地时间时间戳
• 两者的差值就是起始的持续时间

这篇关于vue 实现一个持续时间定时器组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---