https://github.com/mlinquan/vue-awesome-countdown
Countdown plug-in with high performance and high accuracy for [Vue](http://vuejs.org/)2.5.0+.
https://github.com/mlinquan/vue-awesome-countdown
Last synced: 9 months ago
JSON representation
Countdown plug-in with high performance and high accuracy for [Vue](http://vuejs.org/)2.5.0+.
- Host: GitHub
- URL: https://github.com/mlinquan/vue-awesome-countdown
- Owner: mlinquan
- License: mit
- Created: 2018-10-26T15:20:55.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:40:32.000Z (almost 3 years ago)
- Last Synced: 2025-02-23T11:36:51.753Z (10 months ago)
- Language: Vue
- Homepage: https://vac.js.org
- Size: 958 KB
- Stars: 190
- Watchers: 2
- Forks: 41
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-awesome-countdown - Countdown plug-in with high performance and high accuracy for [Vue](http://vuejs.org/)2.5.0+. ` 📝 7 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-awesome-countdown - Countdown plug-in with high performance and high accuracy for Vue 2.5.0+. Official site: [https://vac.js.org](https://vac.js.org) (Components & Libraries / UI Components)
- awesome-vue - vue-awesome-countdown ★77 - Countdown plug-in with high performance and high accuracy for Vue 2.5.0+. Official site: <https://vac.js.org> (UI Components / Time)
- awesome-vue - vue-awesome-countdown - Countdown plug-in with high performance and high accuracy for Vue 2.5.0+. Official site: [https://vac.js.org](https://vac.js.org) (UI Components / Time)
README
# vue-awesome-countdown
[](https://badge.fury.io/js/vue-awesome-countdown)
[](https://unpkg.com/vue-awesome-countdown)
[](https://www.npmjs.com/package/vue-awesome-countdown)
[](https://opensource.org/licenses/MIT)
Countdown plug-in with high performance and high accuracy for [Vue](http://vuejs.org/)2.5.0+.
## Installation
Install
```sh
$ npm install vue-awesome-countdown --save
# or
$ yarn add vue-awesome-countdown
```
### ES6
```js
import vueAwesomeCountdown from 'vue-awesome-countdown'
Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by default
```
### CommonJS
```js
var Vue = require('vue');
var vueAwesomeCountdown = require('vue-awesome-countdown').default;
Vue.use(vueAwesomeCountdown);
```
### Browser
```html
```
## Usage
Vue2.5.0+.
```html
{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}
Done!
```
```html
{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}
Done!
```
Vue2.6.0+.
```html
{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}
Done!
```
```html
{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}
Done!
```
### SSR (Nuxt)
```html
{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}
Done!
```
## Example demo
[https://vac.js.org](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
```json
{
"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.