时间戳

首页 > 解决方案 > Vue 倒计时事件结束

vue.js - Vue 倒计时事件结束

问题描述

我在我的 vue 组件中使用倒计时vuejs-countdown，我想在倒计时结束时显示另一个组件。

就像是：

   <template>
     <div>
         <flip-countdown :deadline=element.deadline></flip-countdown>
         <div v-if="!element.deadline"> Expired!</div>
      </div>
   </template>

但我不知道这是否存在结束事件。有什么建议吗？

标签： vue.js

解决方案

我没有看到库中发出任何事件，您可以在此处查看组件：https ://github.com/getanwar/vuejs-countdown/blob/master/src/Countdown.vue

但是，您可以编辑组件并添加自定义“结束”事件，$emit('end')方法是在该组件的代码中添加一个简单的代码，83如下所示

if(this.diff <= 0 || this.stop) {
  this.diff = 0;
  // Remove interval
  clearInterval(interval);
  this.$emit('end') // emitting our custom end event
}

那么您可以在倒计时结束后使用该事件将布尔值设置为 true：

<template>
  <div>
    <flip-countdown :deadline='element.deadline' @end='expired = true'></flip-countdown>
    <div v-if="!expired"> Expired!</div>
  </div>
</template>

推荐阅读