@huteming/ui-clocker NPM

倒计时

引入

import { TmClocker } from '@huteming/ui'

Vue.use(TmClocker)
// Vue.component(TmClocker.name, TmClocker)

例子

<tm-clocker :start-time="start" :end-time="end" @end="handleEnd">
    <template slot-scope="scope">
        <div>{{ scope.whole }}</div>
        <div>{{ scope.total }}</div>
        <div>{{ scope.days }}</div>
        <div>{{ scope.hours }}</div>
        <div>{{ scope.minutes }}</div>
        <div>{{ scope.seconds }}</div>
    </template>
</tm-clocker>

API

参数	说明	类型	默认值
startTime	开始时间	String, Number, Date	`now`
endTime	结束时间	String, Number, Date	`now`
format	时间格式化模板	String	`D 天 H 时 M 分 S`

slot 对象参数

参数	说明	类型
whole	完整时间，根据 format 格式化得到	String
total	总共剩余秒	Number
days	剩余天数	Number
hours	剩余小时，24小时以内	Number
minutes	剩余分钟，60分钟以内	Number
seconds	剩余秒，60秒以内	Number