vue-countdown

Countdown component for Vue.js.

• Website

Table of contents

• Main
• Getting started
• Props
• Methods
• Events
• Browser support
• Versioning
• License

Main

dist/
├── vue-countdown.js        (UMD)
├── vue-countdown.min.js    (UMD, compressed)
├── vue-countdown.common.js (CommonJS, default)
└── vue-countdown.esm.js    (ES Module)

Getting started

Install

npm install @xkeshi/vue-countdown vue

In browser:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>

Usage

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>

⬆ back to top

Props

auto-start

• Type: Boolean
• Default: true

Start to countdown automatically when initialized.

emit-events

• Type: Boolean
• Default: true

Indicate if emit the countdown events or not.

interval

• Type: Number
• Default: 1000

Update interval time (in milliseconds) of the countdown.

leading-zero

• Type: Boolean
• Default: true

Add a leading zero to the output days, hours, minutes and seconds if they are less than 10.

now

• Type: Function
• Default: () => Date.now()

Generate the current time (in milliseconds) of a specific time zone.

time

• Type: Number
• Default: 0

Total number of time (in milliseconds) for the countdown.

Note: The given value should not less than 0.

tag

• Type: String
• Default: 'span'

The tag of the component root element in the countdown.

Methods

start

Start to countdown.

<countdown v-bind:auto-start="false" ref="countdown"></countdown>

export default {
  mounted() {
    this.$refs.countdown.start();
  },
};

pause

Pause the countdown.

<countdown ref="countdown"></countdown>

export default {
  mounted() {
    this.$refs.countdown.pause();
  },
};

stop

Stop the countdown.

Events

Require to set the emit-events property to true, or if you don't need these events, you can set the prop to false for better performance.

countdownstart

This event fires when countdown started.

countdownpause

This event fires when countdown is paused.

countdownprogress

This event fires when countdown in progress.

<countdown v-on: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);
    },
  },
};

countdownend

This event fires when countdown stopped.

⬆ back to top

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Xkeshi

⬆ back to top