首页 > 编程 > JavaScript > 正文

vue中倒计时组件的实例代码

2019-11-19 13:32:13
字体:
来源:转载
供稿:网友

子组件:

<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(){}}

总结

以上所述是小编给大家介绍的vue中倒计时组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表