Vue-countdown-timer Component

Installation

``bash
npm i vuejs-countdown-timer -S
`

Usage

$3

| Supported Package | Version |
| ----------------- | ------- |
| Vue | 2.5+ |

$3

Import component

`es6
// global register at main.js
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(VueCountdownTimer);
`

Vue default template

`vue



`

Vue Customized template

`vue



`

$3

| Slot name | Description |
| ----------- | --------------------- |
| start-label | Timer start label |
| countdown | Timer countdown label |
| end-label | Timer end label |
| end-text | Timer ended text |

$3

| Slot scope name | Description |
| --------------- | ------------------------------------------------------------------------ |
| startLabel | Event begin label text |
| endLabel | Event end label text |
| tips | Tips true means countdown till start, false means countdown till end |
| labelPosition | event label position, 'begin' or 'end' |

$3

| Slot scope name | Description |
| --------------- | -------------------------------------------------- |
| days | Number of days till event |
| dayTxt | Day label |
| hours | Number of hours till event |
| hourTxt | Hours label |
| minutes | Number of minutes till event |
| minuteTxt | Minutes label |
| seconds | Number of seconds till event |
| secondTxt | Seconds label |
| showDay | display status of day countdown number and text |
| showHour | display status of hour countdown number and text |
| showMinute | display status of minute countdown number and text |

$3

| Slot scope name | Description |
| --------------- | ------------------------------------------------------------------------ |
| startLabel | Event begin label text |
| endLabel | Event end label text |
| tips | Tips true means countdown till start, false means countdown till end |
| labelPosition | event label position, 'begin' or 'end' |

$3

| Slot scope name | Description |
| --------------- | ---------------- |
| endText | Timer ended text |

$3

start-time

- type: Number|String
- required : true

end-time

- type: Number|String
- required : true

interval

- type: Number
- required : false
- default : 1000

start-label

- type: String
- required : false
- default : ''

end-label

- type: String
- required : false
- default : ''

label-position - begin (before countdown) / end (after countdown)

- type: String
- required : false
- default : 'begin'

end-text

- type: String
- required : false
- default : 'Event ended!'

day-txt - if pass null, this unit will be hidden

- type: String
- required : false
- default : ':'

hour-txt - if pass null, this unit will be hidden

- type: String
- required : false
- default : ':'

seconds-txt - if pass null, this unit will be hidden

- type: String
- required : false
- default : ':'

seconds-fixed

- type: String
- required : false
- default : ':'

show-zero - display status of 00

- type: Boolean
- required : false
- default : true

$3

start_callback - Event started callback

- type: Function
- required : false

end_callback - Event ended callback

- type: Function
- required : false

If the end-time prop is dynamically generated or 'computed', the initial value will be NaN. This will trigger the end_callback function, which might not be desirable. This can be solved by declaring it this way:

`vue


`

Where end_at is the computed value, and endAt` is a default value.

Liscense

MIT License