A simple plain countdown timer component for Vue.js.
How to use it:
1. Import the countdown component.
import VueCountdown from '@chenfengyuan/vue-countdown';
2. Import the component.
Vue.component(VueCountdown.name, VueCountdown);
3. The HTML.
<countdown :time="time" :interval="100" tag="p">
<template slot-scope="props">New Year Countdown：{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }}.{{ Math.floor(props.milliseconds / 100) }} seconds.</template>
</countdown>
4. Default props.
/**
* Starts the countdown automatically when initialized.
*/
autoStart: {
type: Boolean,
default: true,
},
/**
* Emits the countdown events.
*/
emitEvents: {
type: Boolean,
default: true,
},
/**
* The interval time (in milliseconds) of the countdown progress.
*/
interval: {
type: Number,
default: 1000,
validator: (value) => value >= 0,
},
/**
* Generate the current time of a specific time zone.
*/
now: {
type: Function,
default: () => Date.now(),
},
/**
* The tag name of the component's root element.
*/
tag: {
type: String,
default: 'span',
},
/**
* The time (in milliseconds) to count down from.
*/
time: {
type: Number,
default: 0,
validator: (value) => value >= 0,
},
/**
* Transforms the output props before render.
*/
transform: {
type: Function,
default: (props) => props,
},
Preview:
Changelog:
v2.1.1 (03/19/2023)
- update the total milliseconds correctly
v2.1.0 (08/13/2022)
- Add the restart method.
v2.0.0 (02/07/2022)
- Update for Vue 3
Download Details:
Author: fengyuanchen
Live Demo: minimal-countdown-component
Download Link: https://github.com/fengyuanchen/vue-countdown/archive/master.zip
Official Website: https://github.com/fengyuanchen/vue-countdown
Install & Download:
# Yarn
$ yarn add @chenfengyuan/vue-countdown
# NPM
$ npm i @chenfengyuan/vue-countdown --save