vue-awesome-countdown

    1.1.4 • Public • Published

    vue-awesome-countdown

    npm version Gzip Size Monthly Downloads License: MIT

    Countdown plug-in with high performance and high accuracy for Vue2.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

    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

    Copyright © 2018 LinQuan.

    Install

    npm i vue-awesome-countdown

    DownloadsWeekly Downloads

    3,447

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    60.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • mlinquan