倒计时变量 (HH:mm:ss)

Question

我解析一个日期 YYYY-mm-dd 并计算直到午夜的差异。结果将始终低于 24 小时，例如 10:01:10 - HH:mm:ss 直到过期。我想知道如何通过给定的示例实现倒计时功能。

<template>
    <Label :text="date.expires | readableTime"></Label>
    </template>

    filters: {
        readableTime(value) {
          var now = moment(new Date());
          var end = moment(value);
          var diff = moment.duration(end.diff(now));
          try {
            return moment.utc(diff.as("milliseconds")).format("HH:mm:ss");
          } catch (e) {
            return "00:00:00";
          }
        }
      }

Answer 1

您必须使用使用计时器和反应数据属性。我建议您对组件数据进行安全比较，在组件挂载时启动计时器并在销毁之前清除它

data() {
    return {
        diff: this.calculareDiff() 
    }
}

methods: {
    calculareDiff() {
        const now = moment(new Date());
        const end = moment(this.date.expires);
        this.diff = moment.duration(end.diff(now));
    }
},

mounted() {
    this.timer = setInterval(() => this.calculareDiff(), 1000)
},

beforeDestroy() {
    clearInterval(this.timer)
}