https://github.com/realgeoffrey/vue-timer-countdown
倒计时（Vue@2组件）
https://github.com/realgeoffrey/vue-timer-countdown
countdown-timer countdowntimer vue
Last synced: 2 months ago
JSON representation
倒计时（Vue@2组件）
- Host: GitHub
- URL: https://github.com/realgeoffrey/vue-timer-countdown
- Owner: realgeoffrey
- License: mit
- Created: 2019-10-25T09:10:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-29T04:19:22.000Z (about 2 years ago)
- Last Synced: 2024-04-30T00:20:51.402Z (about 1 year ago)
- Topics: countdown-timer, countdowntimer, vue
- Language: Vue
- Homepage: https://realgeoffrey.github.io/vue-timer-countdown/demo/index.html
- Size: 29.3 KB
- Stars: 17
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-timer-countdown
Vue@2的倒计时组件
1. npm：
2. demo：
### 安装
1. Node.js安装
```bash
npm install vue-timer-countdown --save
```
2. 浏览器引用
```html
```
### 注册组件
1. Node.js注册
1. 全局注册
```javascript
import Vue from 'vue'
import vueTimerCountdown from 'vue-timer-countdown'
// 全局注册
Vue.use(vueTimerCountdown, { component: 'TimerCountdown' }) // 组件名默认是：timer-countdown
// 或：Vue.component('TimerCountdown', vueTimerCountdown)
```
2. 局部注册
```javascript
import vueTimerCountdown from 'vue-timer-countdown'
export default {
components: {
// 局部注册
TimerCountdown: vueTimerCountdown
}
}
```
2. 浏览器注册
1. 全局注册
```html
// 全局注册
Vue.use(vueTimerCountdown, { component: 'timer-countdown' }) // 组件名默认是：timer-countdown
// 或：Vue.component('timer-countdown', vueTimerCountdown)
```
2. 局部注册
```html
new Vue({
components: {
// 局部注册
'timer-countdown': vueTimerCountdown
}
})
```
### 用法
1. 参数
```vue
```
>任何时候（包括已经结束后触发`done`之后），修改`deadline`都可以让组件重新启动。
2. 插槽
```vue
{{ time.day }}天
{{ time.hour }}时
{{ time.minute }}分
{{ time.second }}秒
```
### Tips
因为传递的`deadline`是剩余秒数，而不是时间戳，所以如果想要重启同一个秒数的倒计时，需要想办法触发，比如先设置`deadline`为其他值然后再设置回去。（如果改为时间戳实现就可以规避前面说的问题，但是使用者就要每次传入`倒计时秒数 + Date.now()`）