倒计时

使用方式

在 script 中引用组件

import countDown from '@/components/countdown/countdown.vue'
export default {
    components: {
        countDown
    }
}

在 template 中使用组件

<count-down :time="60" timeType="second" format="{%h}:{%m}:{%s}"></count-down>

1 基本用法

当time-type='datetime'时，time值格式为日期,且需要大于当前日期，如果小于当前日期，组件不会开始工作；

 <count-down></count-down>
 <count-down time="2018-11-09 00:00"></count-down>

2 修改time-type为second

 <count-down time-type="second" time="1500"></count-down>
 <count-down time-type="second" time="-1500"></count-down>

3自定义显示日期模板

通过format定义时间显示的格式,默认为{%d}天{%h}时{%m}分{%s}秒；

 <count-down time-type="second" time="60"  format="{%s}秒"/>
 <count-down time-type="second" time="1500" format="{%m}:{%s}"/>
 <count-down time-type="second" time="3690" format="{%h}:{%m}:{%s}"/>
 <count-down time-type="second" time="-1500" />

停止计时器

通过status属性切换倒计时组件的计时状态，默认为true，表示计时器处于计时状态

倒计时结束事件

linend    倒计时结束后的事件
 <count-down @linend="linend" time-type="second" time="1500"></count-down>