Countdown component for Vue.js.
dist/
├── vue-countdown.js (UMD)
├── vue-countdown.min.js (UMD, compressed)
├── vue-countdown.common.js (CommonJS, default)
└── vue-countdown.esm.js (ES Module)
npm install @xkeshi/vue-countdown vue
In browser:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>
import Vue from 'vue';
import VueCountdown from '@xkeshi/vue-countdown';
Vue.component(VueCountdown.name, VueCountdown);
<countdown :time="2 * 24 * 60 * 60 * 1000">
<template slot-scope="props">Time Remaining:{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
</countdown>
<!-- <span>Time Remaining:01 days, 23 hours, 59 minutes, 59 seconds.</span> -->
In browser:
<script>Vue.component(VueCountdown.name, VueCountdown);</script>
- Type:
Boolean
- Default:
true
Starts the countdown automatically, when initialized.
- Type:
Boolean
- Default:
true
Indicates, if the component should emit the countdown events.
- Type:
Number
- Default:
1000
Updates the interval time (in milliseconds) of the countdown.
- Type:
Boolean
- Default:
true
Adds a leading zero to the output of days, hours, minutes and seconds, if they are single-digit.
- Type:
Function
- Default:
() => Date.now()
Generates the current time (in milliseconds) in a specific time zone.
- Type:
Number
- Default:
0
The time (in milliseconds) the component should count down from.
Note: The value should not be less than 0
.
- Type:
String
- Default:
'span'
The tag name of the component's root element.
Start the countdown.
<countdown :auto-start="false" ref="countdown"></countdown>
export default {
mounted() {
this.$refs.countdown.start();
},
};
Pause the countdown.
<countdown ref="countdown"></countdown>
export default {
mounted() {
this.$refs.countdown.pause();
},
};
Stop the countdown.
<countdown ref="countdown"></countdown>
export default {
mounted() {
this.$refs.countdown.stop();
},
};
You have to set the
emit-events
property totrue
to be able use these events. If you don't need them, you can set the property tofalse
for better performance.
This event fires when the countdown starts.
This event fires when the countdown is paused.
This event fires when the countdown is in progress.
<countdown @countdownprogress="handleCountdownProgress"></countdown>
export default {
methods: {
handleCountdownProgress(data) {
console.log(data.days);
console.log(data.hours);
console.log(data.minutes);
console.log(data.seconds);
console.log(data.totalDays);
console.log(data.totalHours);
console.log(data.totalMinutes);
console.log(data.totalSeconds);
},
},
};
This event fires when the countdown stops.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 9+
Maintained under the Semantic Versioning guidelines.