vue中多个倒计时实现代码实例

下面是“vue中多个倒计时实现代码实例”的完整攻略：

1. 基本思路

在Vue中实现多个倒计时，常用的方式是创建一个计时器组件，然后在需要倒计时的组件中引用并传递参数。具体实现步骤如下：

1. 创建一个组件，例如Countdown组件，用于显示倒计时；
2. 在Countdown中设置一个计时器，控制倒计时的时间；
3. 在需要倒计时的组件中引用Countdown组件，并传递相应的参数，例如倒计时的起始时间和结束时间。

2. 示例1

下面是一个示例，演示如何在Vue中创建一个Countdown组件，并在另一个组件中引用和传递参数：

Countdown组件代码

<template>
  <div>
    剩余时间：{{ remainingTime }}
  </div>
</template>

<script>
export default {
  props: {
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      remainingTime: 0
    }
  },
  created() {
    this.remainingTime = this.endTime - this.startTime;
    this.timer = setInterval(() => {
      this.remainingTime--;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

在Countdown组件中，我们创建了一个计时器timer，用于控制倒计时的时间。组件的props中接收到startTime和endTime两个参数，通过计算得到remainingTime的值，并在每一秒钟中更新这个值。当组件销毁时，我们需要清除计时器，以防止内存泄漏。

引用Countdown组件并传递参数

<template>
  <div>
    <countdown :startTime="startTime" :endTime="endTime"/>
  </div>
</template>

<script>
import Countdown from '@/components/Countdown.vue'

export default {
  components: {
    Countdown
  },
  data() {
    return {
      startTime: Date.now(),
      endTime: Date.now() + 3600 * 1000
    }
  }
}
</script>

在需要倒计时的组件中，我们引入Countdown组件，并传递startTime和endTime两个参数。倒计时的起始时间可以使用Date.now()获取当前时间戳，倒计时的结束时间可以设置为当前时间戳加上一个小时的毫秒数。

3. 示例2

上面的示例演示了如何在Vue中实现一个简单的倒计时，但如果需要同时管理多个倒计时，则需要进行一些修改。下面是另一个示例，演示如何在Vue中实现多个倒计时：

Countdown组件代码

<template>
  <div>
    倒计时{{ index + 1 }}：{{ remainingTime }} 秒
  </div>
</template>

<script>
export default {
  props: {
    startTime: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      remainingTime: 0
    }
  },
  created() {
    this.remainingTime = this.duration - Math.floor((Date.now() - this.startTime) / 1000);
    this.timer = setInterval(() => {
      this.remainingTime--;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

在这个示例中，我们为Countdown组件添加了一个index属性，用于区分多个倒计时。我们也修改了startTime的默认值为0。在created钩子函数中，我们根据当前时间戳和startTime计算出剩余时间remainingTime。在每一秒钟中，我们使用setInterval函数更新remainingTime的值。在组件销毁时，我们需要停止计时器。

在父组件中循环引用和传递参数

<template>
  <div>
    <div v-for="(timer, index) in timers" :key="index">
      <countdown :startTime="timer.startTime" :duration="timer.duration" :index="index"/>
    </div>
  </div>
</template>

<script>
import Countdown from '@/components/Countdown.vue'

export default {
  components: {
    Countdown
  },
  data() {
    return {
      timers: [
        {
          startTime: Date.now(),
          duration: 60
        },
        {
          startTime: Date.now(),
          duration: 120
        }
      ]
    }
  }
}
</script>

在父组件中，我们创建了一个timers数组，用于存储多个倒计时对象，每个对象包含startTime和duration两个属性。我们在父组件中循环遍历timers数组，并将每个对象的属性作为Countdown组件的props传递。我们在Countdown组件中使用index属性对不同的倒计时进行区分。