Vue-countdown-timer Component
Installation
npm i vuejs-countdown-timer -SUsage
Support
| Supported Package | Version |
|---|---|
| Vue | 2.5+ |
Install component and Usage
Import component
// global register at main.js
import 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