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