当前位置：首页 > VUE

vue实现倒计时功能

2026-03-26 17:39:41VUE

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事件通知倒计时结束。

vue实现倒计时功能

<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等专门库：

vue实现倒计时功能

安装依赖：

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>