VAC (vue-awesome-countdown)

# vue-awesome-countdown

npm version (opens new window) Gzip Size (opens new window) Monthly Downloads (opens new window) License: MIT (opens new window)

Countdown plug-in with high performance and high accuracy for Vue (opens new window)2.5.0+.

# Installation

Install

$ npm install vue-awesome-countdown --save
# or
$ yarn add vue-awesome-countdown

# ES6


import vueAwesomeCountdown from 'vue-awesome-countdown'

Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by default

# CommonJS

var Vue = require('vue');
var vueAwesomeCountdown = require('vue-awesome-countdown').default;

Vue.use(vueAwesomeCountdown);

# Browser

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-awesome-countdown@latest"></script>
<!-- OR -->
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-awesome-countdown/dist/vue-awesome-countdown.umd.min.js"></script>

# Usage

Vue2.5.0+.

<countdown :end-time="new Date().getTime() + 60000">
  <span
    slot="process"
    slot-scope="anyYouWantedScopName">{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span>
  <span slot="finish">Done!</span>
</countdown>

<vac :end-time="new Date().getTime() + 60000">
  <span
    slot="process"
    slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
  <span slot="finish">Done!</span>
</vac>

Vue2.6.0+.

<countdown :end-time="new Date().getTime() + 60000">
  <template
    v-slot:process="anyYouWantedScopName">
      <span>{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span>
    </template>
  <template
    v-slot:finish>
      <span>Done!</span>
  </template>
</countdown>

<vac :end-time="new Date().getTime() + 60000">
  <template
    v-slot:process="{ timeObj }">
    <span>{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
  </template>
  <template
    v-slot:finish>
      <span>Done!</span>
  </template>
</vac>

# SSR (Nuxt)

<no-ssr>
  <vac :end-time="new Date().getTime() + 60000">
    <span
      slot="process"
      slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
    <span slot="finish">Done!</span>
  </vac>
</no-ssr>

# Example demo

https://vac.js.org (opens new window)

# Props

Prop Required Explain Type Default
startTime false Time stamp of countdown start [String, Number, Date] null
endTime when leftTime undefined Time stamp of countdown end [String, Number, Date] null
leftTime when endTime undefined Remaining milliseconds of countdown end Number 0
autoStart false Start countdown automatically Boolean true
speed false Unit: millisecond Number 1000
tag false The wrap tag name String span

# Data

The data can get it through slot-scop or methods.

Data Explain Default
state The countdown run state, the states are beforeStart, stopped, paused, process and finished beforeStart
attrs The countdown component tag attributes {}
actualEndTime Actual countdown end time null
timeObj Look look {}
countdownTimer The countdown timer function, Do not use as much as possible. null
actualStartTime Actual countdown start time. null
runTimes Countdown run times (The onProcess methods run times) 0
usedTime The total time consuming from the countdown to the end. 0

# timeObj

{
    "endTime": 1542634411361,
    "speed": 1000,
    "leftTime": 97019,
    "d": "0",
    "h": "00",
    "m": "01",
    "s": "37",
    "ms": "019",
    "org": {
        "d": 0.001134247685185185,
        "h": 0.02722194444444444,
        "m": 1.6333166666666665,
        "s": 37.998999999999995,
        "ms": 19
    },
    "ceil": {
        "d": 1,
        "h": 1,
        "m": 2,
        "s": 98
    }
}

# Slots

Slot process and slot finish will not display at the same time.

name slot-scop Position Display condition
prev component _self 1 Defined, Controllable display
before component _self 2 On before start, state === 'beforeStart'
process component _self 2 On process, state === 'process' or state === 'stopped' or state === 'paused'
finish component _self 3 On finish, state === 'finished'
default component _self 3 Defined, Controllable display

# Methods

The methods can be accesse through slot-scop or $refs.

Method Explain Parameters
startCountdown restart
stopCountdown no
pauseCountdown no
switchCountdown no
finishCountdown no
doCountdown no

# Event

Event Explain Parameters
start Functions executed at the beginning of countdown vm
process Function executed when countdown is performed vm
stop Function executed when countdown stops vm
pause Function executed when countdown paused vm
finish Function executed when countdown finished vm

# MIT License