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
- Browser:
window.VueCountdown
- CommonJS:
var VueCountdown = require('@xkeshi/vue-countdown')
- ES2015:
import VueCountdown from '@xkeshi/vue-countdown'
Vue.component('countdown', VueCountdown);
<countdown :time="2 * 24 * 60 * 60 * 1000">
<template 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> -->
- Type:
Boolean
- Default:
true
Start to countdown automatically when initialized.
- Type:
Boolean
- Default:
true
Add a leading zero to the output days, hours, minutes and seconds if they are less than 10.
- Type:
Number
- Default:
1000
Update interval time (in milliseconds) of the countdown.
<countdown v-bind:interval="100"></countdown>
- Type:
Number
- Default:
0
Total number of time (in milliseconds) for the countdown.
Note: The given value should not less than 0
.
- Type:
String
- Default:
'span'
The tag of the component root element in the countdown.
Start to countdown.
<countdown v-bind:auto-start="false" ref="countdown"></countdown>
export default {
mounted() {
this.$refs.countdown.start();
},
};
Stop the countdown.
This event fires when countdown started.
This event fires when countdown in progress.
<countdown v-on:countdownprogress="onCountdownProgress"></countdown>
export default {
methods: {
onCountdownProgress(data) {
console.log(data.days);
console.log(data.hours);
console.log(data.minutes);
console.log(data.seconds);
},
},
};
This event fires when countdown stopped.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 9+
Maintained under the Semantic Versioning guidelines.