vue实现倒计时功能
Vue实现倒计时功能
方法一：使用setInterval基础实现
在Vue组件的data中定义倒计时初始值，通过setInterval每秒更新剩余时间，并在组件销毁时清除定时器。
<template>
<div>{{ formattedTime }}</div>
</template>
<script>
export default {
data() {
return {
seconds: 60, // 倒计时总秒数
timer: null
}
},
computed: {
formattedTime() {
const mins = Math.floor(this.seconds / 60)
const secs = this.seconds % 60
return `${mins}:${secs < 10 ? '0' : ''}${secs}`
}
},
mounted() {
this.timer = setInterval(() => {
if (this.seconds > 0) {
this.seconds--
} else {
clearInterval(this.timer)
}
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>方法二：封装可复用组件
将倒计时逻辑封装为可复用的组件，通过props接收初始时间，通过emit事件通知倒计时结束。
<template>
<div>{{ timeText }}</div>
</template>
<script>
export default {
props: {
initialTime: {
type: Number,
default: 60
}
},
data() {
return {
remaining: this.initialTime
}
},
computed: {
timeText() {
return new Date(this.remaining * 1000).toISOString().substr(14, 5)
}
},
methods: {
start() {
this.interval = setInterval(() => {
this.remaining--
if (this.remaining <= 0) {
this.$emit('timeup')
clearInterval(this.interval)
}
}, 1000)
},
reset() {
clearInterval(this.interval)
this.remaining = this.initialTime
}
},
beforeDestroy() {
clearInterval(this.interval)
}
}
</script>方法三：使用第三方库
对于复杂需求（如跨组件状态同步），可以使用vue-countdown等专门库：
安装依赖：
npm install vue-countdown使用示例：
<template>
<countdown :time="timeInMs" @end="onCountdownEnd">
<template slot-scope="props">{{ props.minutes }}:{{ props.seconds }}</template>
</countdown>
</template>
<script>
import Countdown from 'vue-countdown'
export default {
components: { Countdown },
data() {
return {
timeInMs: 5 * 60 * 1000 // 5分钟
}
},
methods: {
onCountdownEnd() {
alert('倒计时结束')
}
}
}
</script>注意事项
- 移动端建议使用
requestAnimationFrame替代setInterval以获得更平滑的动画效果 - 服务端渲染(SSR)场景需在
mounted生命周期启动定时器 - 长时间倒计时应考虑使用Web Worker避免主线程阻塞
- 重要业务场景应添加服务器时间校验逻辑
以上方法可根据具体需求选择实现，方法一适合简单场景，方法二具备更好复用性，方法三适合需要丰富功能的项目。
