Vue-countdown-timer Component
Installation
npm i vuejs-countdown-timer -S
Usage
Support
Supported Package | Version |
---|---|
Vue | 2.5+ |
Install component and Usage
Import component
// global register at main.jsimport VueCountdownTimer from 'vuejs-countdown-timer';Vue.use(VueCountdownTimer);
Vue default template
<template> <vue-countdown-timer @start_callback="startCallBack('event started')" @end_callback="endCallBack('event ended')" :start-time="'2018-10-10 00:00:00'" :end-time="1481450115" :interval="1000" :start-label="'Until start:'" :end-label="'Until end:'" label-position="begin" :end-text="'Event ended!'" :day-txt="'days'" :hour-txt="'hours'" :minutes-txt="'minutes'" :seconds-txt="'seconds'"> </vue-countdown-timer></template> <script >export default { name: 'Timer', methods: { startCallBack: function(x) { console.log(x); }, endCallBack: function(x) { console.log(x); }, },};</script>
Vue Customized template
<template> <vue-countdown-timer @start_callback="startCallBack('event started')" @end_callback="endCallBack('event ended')" :start-time="'2018-10-10 00:00:00'" :end-time="1481450115" :interval="1000" :start-label="'Until start:'" :end-label="'Until end:'" label-position="begin" :end-text="'Event ended!'" :day-txt="'days'" :hour-txt="'hours'" :minutes-txt="'minutes'" :seconds-txt="'seconds'"> <template slot="start-label" slot-scope="scope"> <span style="color: red" v-if="scope.props.startLabel !== '' && scope.props.tips && scope.props.labelPosition === 'begin'">{{scope.props.startLabel}}:</span> <span style="color: blue" v-if="scope.props.endLabel !== '' && !scope.props.tips && scope.props.labelPosition === 'begin'">{{scope.props.endLabel}}:</span> </template> <template slot="countdown" slot-scope="scope"> <span>{{scope.props.days}}</span><i>{{scope.props.dayTxt}}</i> <span>{{scope.props.hours}}</span><i>{{scope.props.hourTxt}}</i> <span>{{scope.props.minutes}}</span><i>{{scope.props.minutesTxt}}</i> <span>{{scope.props.seconds}}</span><i>{{scope.props.secondsTxt}}</i> </template> <template slot="end-label" slot-scope="scope"> <span style="color: red" v-if="scope.props.startLabel !== '' && scope.props.tips && scope.props.labelPosition === 'end'">{{scope.props.startLabel}}:</span> <span style="color: blue" v-if="scope.props.endLabel !== '' && !scope.props.tips && scope.props.labelPosition === 'end'">{{scope.props.endLabel}}:</span> </template> <template slot="end-text" slot-scope="scope"> <span style="color: green">{{ scope.props.endText}}</span> </template> </vue-countdown-timer></template> <script >export default { name: 'Timer', methods: { startCallBack: function(x) { console.log(x); }, endCallBack: function(x) { console.log(x); }, },};</script>
Slots
Slot name | Description |
---|---|
start-label | Timer start label |
countdown | Timer countdown label |
end-label | Timer end label |
end-text | Timer ended text |
start-label
Scoped Slot
Slot scope name | Description |
---|---|
startLabel | Event begin label text |
endLabel | Event end label text |
tips | Tips true means countdown till start, false means countdown till end |
labelPosition | event label position, 'begin' or 'end' |
countdown
Scoped Slot
Slot scope name | Description |
---|---|
days | Number of days till event |
dayTxt | Day label |
hours | Number of hours till event |
hourTxt | Hours label |
minutes | Number of minutes till event |
minuteTxt | Minutes label |
seconds | Number of seconds till event |
secondTxt | Seconds label |
showDay | display status of day countdown number and text |
showHour | display status of hour countdown number and text |
showMinute | display status of minute countdown number and text |
end-label
Scoped Slot
Slot scope name | Description |
---|---|
startLabel | Event begin label text |
endLabel | Event end label text |
tips | Tips true means countdown till start, false means countdown till end |
labelPosition | event label position, 'begin' or 'end' |
end-text
Scoped Slot
Slot scope name | Description |
---|---|
endText | Timer ended text |
Props
start-time
type
: Number|Stringrequired
: true
end-time
type
: Number|Stringrequired
: true
interval
type
: Numberrequired
: falsedefault
: 1000
start-label
type
: Stringrequired
: falsedefault
: ''
end-label
type
: Stringrequired
: falsedefault
: ''
label-position - begin (before countdown) / end (after countdown)
type
: Stringrequired
: falsedefault
: 'begin'
end-text
type
: Stringrequired
: falsedefault
: 'Event ended!'
day-txt - if pass null
, this unit will be hidden
type
: Stringrequired
: falsedefault
: ':'
hour-txt - if pass null
, this unit will be hidden
type
: Stringrequired
: falsedefault
: ':'
seconds-txt - if pass null
, this unit will be hidden
type
: Stringrequired
: falsedefault
: ':'
seconds-fixed
type
: Stringrequired
: falsedefault
: ':'
show-zero - display status of 00
type
: Booleanrequired
: falsedefault
: true
Events
start_callback - Event started callback
type
: Functionrequired
: false
end_callback - Event ended callback
type
: Functionrequired
: false
If the end-time
prop is dynamically generated or 'computed', the initial value will be NaN
. This will trigger the end_callback
function, which might not be desirable. This can be solved by declaring it this way:
<template> <vue-countdown-timer ... :end-time="end_at?end_at:endAt" ... ></vue-countdown-timer></template><script> data() { return { endAt: (new Date).getTime()+5000 } }</script>
Where end_at
is the computed value, and endAt
is a default value.
Liscense
MIT License