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

  • 更新时间:2022-06-17 20:05:14
  • 编辑:何高翰

子组件:

<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中倒计时组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

相关教程

  • Vue.js项目API、Router配置拆分实践

    这篇文章主要介绍了详解Vue.js项目API、Router配置拆分实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2019-12-07

  • 如何运用sessionStorage解决vuex页面刷新后数据被清除的问题

    localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。本文使用的是sessionStorage解决vuex在页面刷新后数据被清除的问题,需要的朋友

    发布时间:2020-01-15

  • Vuejs 2.0 子组件访问/调用父组件示例代码

    这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下

    发布时间:2020-01-28

  • vue在自定义组件中使用v-model的方法

    本篇文章主要介绍了vue如何在自定义组件中使用v-model,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-04-26

  • vue-validator(vue验证器)实例用法

    本篇文章主要介绍了vue-validator(vue验证器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-05-25

  • 关于Vue Component组件注册

    这篇文章主要介绍了Vue源码解读之Component组件注册的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-03-09

  • 介绍于vue实现swipe分页组件示例效果

    本篇文章主要介绍了基于vue实现swipe分页组件实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-01-26

  • 介绍Vue实现分页

    这篇文章主要为大家详细介绍了Vue分页器实现原理,编写了分页器组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-01-27

  • 分享vue使用Element组件时v-for循环里的表单项验证解决方案

    这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-03-01

  • vue和better-scroll实现列表左右联动的代码实例

    这篇文章主要介绍了vue和better-scroll实现列表左右联动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-02-11

用户留言