Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2745a7c
commit 5a69a39
Showing
1 changed file
with
68 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,70 @@ | ||
[![Build Status](https://travis-ci.org/maksimovicdanijel/vue-countdown.svg?branch=master)](https://travis-ci.org/maksimovicdanijel/vue-countdown) | ||
[![Coverage Status](https://coveralls.io/repos/github/maksimovicdanijel/vue-countdown/badge.svg?branch=development)](https://coveralls.io/github/maksimovicdanijel/vue-countdown?branch=development) | ||
VueJS countdown component | ||
|
||
## Countdown component for VueJS | ||
|
||
Component that creates countdown based on provided number of seconds or date in future. Install it by running: | ||
|
||
``` | ||
npm install @dmaksimovic/vue-countdown --save | ||
``` | ||
### Example usage | ||
|
||
Component.vue | ||
``` | ||
<template> | ||
<div> | ||
<vue-countdown v-on:time-expire="handleTimeExpire" :seconds="10"></vue-countdown> | ||
</div> | ||
</template> | ||
<script> | ||
import VueCountdown from '@dmaksimovic/vue-countdown'; | ||
export default { | ||
name: 'my-component', | ||
components: { | ||
'vue-countdown': VueCountdown | ||
}, | ||
methods () { | ||
handleTimeExpire () { | ||
alert('Time is up!'); | ||
} | ||
} | ||
} | ||
</script> | ||
``` | ||
This will create a simple component that will output countdown that starts from 10 and counts until 0. | ||
|
||
### Options | ||
|
||
**seconds** - number of seconds to start counter from (type number) | ||
|
||
**date** - date in future as a string. Any string that can be parsed by Date.parse() is considered valid. Takes precedence over seconds parameter | ||
|
||
**message** - message to display when counter finishes | ||
|
||
**units** - array that represents units which will form the counter. Possible values are 'hours', 'minutes', 'seconds' | ||
|
||
### Events | ||
|
||
**time-expire** - triggered when timer finishes | ||
|
||
### Contributing | ||
|
||
**Building** | ||
|
||
``` | ||
npm run build | ||
``` | ||
|
||
**Testing** | ||
|
||
``` | ||
npm test | ||
``` | ||
|
||
### Licence | ||
|
||
[MIT](https://github.com/maksimovicdanijel/vue-countdown/blob/master/LICENSE) |