vue中倒计时组件

子组件:

<template>  
  <span :endTime="endTime" :callback="callback" :endText="endText">  
    <slot>  
      {{content}}  
    </slot>  
  </span>  
</template>  
<script>  
  export default {  
    data(){  
      return {  
      content: '',  
      }  
    },  
    props:{  
      endTime:{  
        type: String,  
        default :''  
      },  
      endText:{  
        type : String,  
        default:'已结束'  
      },  
      callback : {  
        type : Function,  
        default :''  
      }  
    },  
    mounted () {  
     this.countdowm(this.endTime)  
    },  
    methods: {  
      countdowm(timestamp){  
      let self = this;  
      let timer = setInterval(function(){  
        let nowTime = new Date();  
        let endTime = new Date(timestamp * 1000);  
        let t = endTime.getTime() - nowTime.getTime();  
        if(t>0){  
          let day = Math.floor(t/86400000);  
          let hour=Math.floor((t/3600000)%24);  
          let min=Math.floor((t/60000)%60);  
          let sec=Math.floor((t/1000)%60);  
          hour = hour < 10 ? "0" + hour : hour;  
          min = min < 10 ? "0" + min : min;  
          sec = sec < 10 ? "0" + sec : sec;  
          let format = '';  
          if(day > 0){  
            format = `${day}天${hour}小时${min}分${sec}秒`;  
          }   
          if(day <= 0 && hour > 0 ){  
            format = `${hour}小时${min}分${sec}秒`;   
          }  
          if(day <= 0 && hour <= 0){  
            format =`${min}分${sec}秒`;  
          }  
          self.content = format;  
          }else{  
           clearInterval(timer);  
           self.content = self.endText;  
           self._callback();  
          }  
         },1000);  
        },  
        _callback(){  
        if(this.callback && this.callback instanceof Function){  
           this.callback(...this);  
         }  
      }  
    }  
  }  

</script> 

父组件:

<count-down endTime="1590761620" :callback="callback" endText="已经结束了"></count-down> 

methods:{
callback:function(){

}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值