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 @chenfengyuan/vue-countdown vue

In browser:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>
<script>Vue.component(VueCountdown.name, VueCountdown);</script>

Usage

import Vue from 'vue';
import VueCountdown from '@chenfengyuan/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：1 days, 23 hours, 59 minutes, 59 seconds.</span> -->

⬆ back to top

Props

auto-start

• Type: Boolean
• Default: true

Starts the countdown automatically when initialized.

emit-events

• Type: Boolean
• Default: true

Emits the countdown events.

interval

• Type: Number
• Default: 1000

The interval time (in milliseconds) of the countdown progress.

Note: The value should not be less than 0.

now

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

Generates the current time (in milliseconds) in a specific time zone.

tag

• Type: String
• Default: 'span'

The tag name of the component's root element.

time

• Type: Number
• Default: 0

The time (in milliseconds) to count down from.

Note: The value should not be less than 0.

transform

• Type: Function
• Default: props => props

Transforms the output props before render.

<countdown :time="120000" :transform="transform">
  <template slot-scope="props">{{ props.minutes }}, {{ props.seconds }}.</template>
</countdown>
<!-- <span>01 minute, 59 seconds.</span> -->

export default {
  methods: {
    transform(props) {
      Object.entries(props).forEach(([key, value]) => {
        // Adds leading zero
        const digits = value < 10 ? `0${value}` : value;

        // uses singular form when the value is less than 2
        const word = value < 2 ? key.replace(/s$/, '') : key;

        props[key] = `${digits} ${word}`;
      });

      return props;
    },
  },
};

⬆ back to top

Methods

start

Starts the countdown.

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

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

abort

Aborts the countdown.

end

Ends the countdown.

⬆ back to top

Events

You have to set the emit-events property to true to enable these events. If you don't need them, you can set the property to false for better performance.

start

This event fires immediately when the start method is called.

progress

This event fires when the countdown is in progress.

<countdown @progress="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.milliseconds);
      console.log(data.totalDays);
      console.log(data.totalHours);
      console.log(data.totalMinutes);
      console.log(data.totalSeconds);
      console.log(data.totalMilliseconds);
    },
  },
};

abort

This event fires immediately when the abort method is called.

end

This event fires immediately when the end method is called.

⬆ 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 © Chen Fengyuan

⬆ back to top