vue-awesome-countdown
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-countdownES6
import vueAwesomeCountdown from 'vue-awesome-countdown' Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by defaultCommonJS
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
<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>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
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, stoped, process and finised | 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' |
| 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 | |
| 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 |
| finish | Function executed when countdown finished | vm |
