vue-timer-countdown

Vue@2的倒计时组件

1. npm：https://www.npmjs.com/package/vue-timer-countdown
2. demo：https://realgeoffrey.github.io/vue-timer-countdown/demo/index.html

安装

1. Node.js安装

    npm install vue-timer-countdown --save
   

2. 浏览器引用

    <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
    <script src="//unpkg.com/vue-timer-countdown"></script>
   

注册组件

1. Node.js注册

   1. 全局注册

       import Vue from 'vue'
       import vueTimerCountdown from 'vue-timer-countdown'
      
       // 全局注册
       Vue.use(vueTimerCountdown, { component: 'TimerCountdown' }) // 组件名默认是：timer-countdown
       // 或：Vue.component('TimerCountdown', vueTimerCountdown)
      

   2. 局部注册

       import vueTimerCountdown from 'vue-timer-countdown'
      
       export default {
         components: {
           // 局部注册
           TimerCountdown: vueTimerCountdown
         }
       }
      

2. 浏览器注册

   1. 全局注册

       <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
       <!-- 需要先引入vue-timer-countdown：<script src="//unpkg.com/vue-timer-countdown"></script> -->
      
       <script>
       // 全局注册
       Vue.use(vueTimerCountdown, { component: 'timer-countdown' }) // 组件名默认是：timer-countdown
       // 或：Vue.component('timer-countdown', vueTimerCountdown)
       </script>
      

   2. 局部注册

       <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
       <!-- 需要先引入vue-timer-countdown：<script src="//unpkg.com/vue-timer-countdown"></script> -->
      
       <script>
       new Vue({
         components: {
           // 局部注册
           'timer-countdown': vueTimerCountdown
         }
       })
       </script>
      

用法

1. 参数

    <TimerCountdown
      :deadline="倒计时剩余时间-秒（必填）"
      :complete-zero="补全0（true）"
      :left-second="提前到期-秒（0）"
      :ignore-day="true：展示到小时；false：展示到天（true）"
      @done="倒计时结束后回调的方法"
      @update="每秒渲染结束后回调的方法，带参数{ day, hour, minute, second, restSecond }（展示的天、小时、分钟、秒，总共剩余的秒）"
    />
   

   任何时候（包括已经结束后触发done之后），修改deadline都可以让组件重新启动。

2. 插槽

    <TimerCountdown
      :deadline="倒计时剩余时间-秒（必填）"
      v-slot="time"
    >
      天
      时
      分
      秒
    </TimerCountdown>
   

Tips

因为传递的deadline是剩余秒数，而不是时间戳，所以如果想要重启同一个秒数的倒计时，需要想办法触发，比如先设置deadline为其他值然后再设置回去。（如果改为时间戳实现就可以规避前面说的问题，但是使用者就要每次传入倒计时秒数 + Date.now()）

This site is open source. Improve this page.