https://github.com/bennyxguo/vuejs-countdown-timer
⏱ Vue 2 event countdown and timer component
https://github.com/bennyxguo/vuejs-countdown-timer
countdown-timer event-countdown vue-component vue2 vuejs2
Last synced: 28 days ago
JSON representation
⏱ Vue 2 event countdown and timer component
- Host: GitHub
- URL: https://github.com/bennyxguo/vuejs-countdown-timer
- Owner: bennyxguo
- License: mit
- Created: 2018-08-25T07:20:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T02:51:15.000Z (over 1 year ago)
- Last Synced: 2025-04-02T20:04:41.683Z (10 months ago)
- Topics: countdown-timer, event-countdown, vue-component, vue2, vuejs2
- Language: HTML
- Homepage: https://gh.bennyxguo.com/vuejs-countdown-timer/
- Size: 83 KB
- Stars: 49
- Watchers: 3
- Forks: 9
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Vue-countdown-timer Component
Vue 2 countdown and timer component
—— Made with ❤️ by TriDiamond
[Demo](https://bennyxguo.github.io/vuejs-countdown-timer/)
[📙 中文文档](https://github.com/bennyxguo/vuejs-countdown-timer/blob/master/README_CN.md)
[📙Changelog](https://github.com/bennyxguo/vuejs-countdown-timer/blob/master/CHANGELOG.md)
## Installation
```bash
npm i vuejs-countdown-timer -S
```
## Usage
### Support
| Supported Package | Version |
| ----------------- | ------- |
| Vue | 2.5+ |
### Install component and Usage
Import component
```es6
// global register at main.js
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(VueCountdownTimer);
```
Vue default template
```vue
export default {
name: 'Timer',
methods: {
startCallBack: function(x) {
console.log(x);
},
endCallBack: function(x) {
console.log(x);
},
},
};
```
Vue Customized template
```vue
{{scope.props.startLabel}}:
{{scope.props.endLabel}}:
{{scope.props.days}}{{scope.props.dayTxt}}
{{scope.props.hours}}{{scope.props.hourTxt}}
{{scope.props.minutes}}{{scope.props.minutesTxt}}
{{scope.props.seconds}}{{scope.props.secondsTxt}}
{{scope.props.startLabel}}:
{{scope.props.endLabel}}:
{{ scope.props.endText}}
export default {
name: 'Timer',
methods: {
startCallBack: function(x) {
console.log(x);
},
endCallBack: function(x) {
console.log(x);
},
},
};
```
### Slots
| Slot name | Description |
| ----------- | --------------------- |
| start-label | Timer start label |
| countdown | Timer countdown label |
| end-label | Timer end label |
| end-text | Timer ended text |
### `start-label` Scoped Slot
| 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'` |
### `countdown` Scoped Slot
| 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 |
### `end-label` Scoped Slot
| 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'` |
### `end-text` Scoped Slot
| Slot scope name | Description |
| --------------- | ---------------- |
| endText | Timer ended text |
### Props
**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
### Events
**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
data() {
return {
endAt: (new Date).getTime()+5000
}
}
```
Where `end_at` is the computed value, and `endAt` is a default value.
# Liscense
MIT License