Thanks to visit codestin.com
Credit goes to vac.js.org

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

# 方式1：全局注册（推荐）

import vueAwesomeCountdown from 'vue-awesome-countdown'

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

# 方式2：直接导入组件使用

import { VueAwesomeCountdown } from 'vue-awesome-countdown'

// 在Vue 2中局部注册
new Vue({
  components: {
    VueAwesomeCountdown
  }
})

// 在Vue 3中使用
const app = createApp(App)
app.component('VueAwesomeCountdown', VueAwesomeCountdown)

# CommonJS

# 方式1：全局注册

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

Vue.use(vueAwesomeCountdown);

# 方式2：直接导入组件使用

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

// 在Vue 2中局部注册
new Vue({
  components: {
    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>

# Vue 3 使用方法

# 方式1：使用全局注册的组件

<countdown :end-time="Date.now() + 60000">
  <template v-slot:process="{ timeObj }">
    <span>剩余时间: {{ timeObj.m }}:{{ timeObj.s }}</span>
  </template>
  <template v-slot:finish>
    <span>倒计时结束！</span>
  </template>
</countdown>

# 方式2：直接导入组件使用（Vue 3）

<template>
  <VueAwesomeCountdown :left-time="101000"> <!-- 101秒 -->
    <template #process="{ timeObj }">
      {{ timeObj.ceil.s }}
    </template>
    <template #finish>Done!</template>
  </VueAwesomeCountdown>
</template>

<script setup>
import { VueAwesomeCountdown } from 'vue-awesome-countdown'
</script>

# SSR (Nuxt)

# Nuxt 2

<no-ssr>
  <vac :end-time="new Date().getTime() + 60000">
    <span
      slot="process"
      slot-scope="{ timeObj }">剩余时间: {{ timeObj.m }}:{{ timeObj.s }}</span>
    <span slot="finish">倒计时结束！</span>
  </vac>
</no-ssr>

# Nuxt 3

<client-only>
  <vac :end-time="Date.now() + 60000">
    <template v-slot:process="{ timeObj }">
      <span>剩余时间: {{ timeObj.m }}:{{ timeObj.s }}</span>
    </template>
    <template v-slot:finish>
      <span>倒计时结束！</span>
    </template>
  </vac>
</client-only>

# 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