Vue倒计时详解

Vue倒计时是一个常见的需求，可用于各类业务场景中，如秒杀活动，订单支付限时等。在Vue中，我们可以通过一些简单的方法实现倒计时功能，本文将从多个方面详细介绍Vue倒计时的相关知识。

一、Vue倒计时怎么做

Vue倒计时可以使用Vue.js提供的计时器方法，通过setInterval()和clearInterval()实现倒计时效果。我们需要将计时器方法封装成一个组件，在组件中可以通过props接收父组件传入的倒计时时间，实现倒计时效果。以下是一个简单的Vue倒计时组件实现：


<template>
  <div>
    {{ time }}
  </div>
</template>

<script>
export default {
  props: {
    totalTime: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      const tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(tid)
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

二、Vue倒计时结束自动加载数据

在某些业务场景中，倒计时结束后需要自动加载数据，那么我们可以在Vue倒计时组件中加入回调函数，在计时结束的时候执行回调函数即可。以下是一个示例：


<template>
  <div>
    {{ time }}
  </div>
</template>

<script>
export default {
  props: {
    totalTime: {
      type: Number,
      required: true
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      const tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

三、Vue倒计时组件

为了方便多次使用，我们可以将Vue倒计时组件封装成一个单独的组件，供其他组件进行引用。在该组件中，我们可以提供一些预设的属性和方法，如总时间，回调函数等。以下是一个Vue倒计时组件的示例：


<template>
  <div class="countdown">
    {{ time }}
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    totalTime: {
      type: Number,
      required: true,
      default: 60
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      const tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

四、Vue倒计时5秒

如果我们需要实现一个5秒倒计时，代码实现非常简单，只需要将Vue倒计时组件中的totalTime属性设置为5即可。以下是一个示例：


<template>
  <div class="countdown">
    {{ time }}
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    totalTime: {
      type: Number,
      required: true,
      default: 5
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      const tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

五、Vue倒计时60秒

同样的，如果我们需要实现一个60秒倒计时，只需要将Vue倒计时组件中的totalTime属性设置为60即可。以下是一个示例：


<template>
  <div class="countdown">
    {{ time }}
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    totalTime: {
      type: Number,
      required: true,
      default: 60
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      const tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

六、Vue倒计时功能

在倒计时过程中，我们可能需要实现一些特殊的功能，如暂停和继续，重新开始等。以下是一个带有暂停和继续功能的Vue倒计时组件：


<template>
  <div class="countdown">
    {{ time }} {{ status }}
    <button @click="pause">暂停</button>
    <button @click="resume">继续</button>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    totalTime: {
      type: Number,
      required: true,
      default: 60
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: '',
      status: '进行中',
      tid: null
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      this.tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(this.tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    },
    pause () {
      clearInterval(this.tid)
      this.status = '已暂停'
    },
    resume () {
      this.countDown()
      this.status = '进行中'
    }
  }
}
</script>

七、Vue倒计时方法

除了使用计时器的方法进行倒计时之外，Vue提供了一些其他的方法，如watch和computed。我们可以通过这些方法轻松的实现倒计时效果。以下是一个使用watch方法实现的Vue倒计时组件：


<template>
  <div class="countdown">
    {{ time }}
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    leftTime: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  watch: {
    leftTime (newVal) {
      clearInterval(this.tid)
      this.countDown()
    }
  },
  methods: {
    countDown () {
      let time = this.leftTime
      this.tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(this.tid)
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    }
  }
}
</script>

八、Vue倒计时取消

在某些业务场景中，我们可能需要在倒计时进行的过程中取消倒计时，我们可以在Vue倒计时组件中加入取消方法。以下是一个Vue倒计时组件的示例：


<template>
  <div class="countdown">
    {{ time }}
    <button @click="cancel">取消</button>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  props: {
    totalTime: {
      type: Number,
      required: true,
      default: 60
    },
    callback: {
      type: Function,
      required: false
    }
  },
  data () {
    return {
      time: ''
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    countDown () {
      let time = this.totalTime
      this.tid = setInterval(() => {
        if (time > 0) {
          time --
          this.time = this.formatTime(time)
        } else {
          clearInterval(this.tid)
          if (this.callback) {
            this.callback()
          }
        }
      }, 1000)
    },
    formatTime (time) {
      const minute = Math.floor(time / 60)
      const second = time % 60
      return `${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    },
    cancel () {
      clearInterval(this.tid)
      // 如果还有其他回调，也可以在这里执行
    }
  }
}
</script>

九、Vue倒计时按钮组件

在许多业务

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/257823.html