@choujiaojiao/vue2-countdown
Version:
64 lines (49 loc) • 2.38 kB
Markdown
# @choujiaojiao/vue2-countdown⏰
> vue倒计时插件
[](https://vuejs.org/)
[](https://github.com/gassnake999/vue-countdown)
[](https://www.npmjs.com/package/@choujiaojiao/vue2-countdown)
[](https://npmcharts.com/compare/@choujiaojiao/vue2-countdown)
[](https://bundlephobia.com/result?p=@choujiaojiao/vue2-countdown)
[](https://bundlephobia.com/result?p=@choujiaojiao/vue2-countdown)
vue-countdown是一个无依赖项的轻量级vue组件,轻松实现倒计时需求,摆脱时间函数烦恼。
支持SSR。
## [Try the demo](https://gassnake999.github.io/vue-countdown/)
### 如何使用
```bash
yarn add @choujiaojiao/vue2-countdown
or
npm install @choujiaojiao/vue2-countdown
```
### 例子
```vue
<template>
<Countdown :time="3666" format="hh:mm:ss" @on-end="onCountdownEnd">
<template slot-scope="{ time }">{{ time }}</template>
</Countdown>
</template>
<script>
import Countdown from '@choujiaojiao/vue2-countdown'
export default {
components: { Countdown },
methods: {
onCountdownEnd() {
console.log('countdown end~')
}
}
}
</script>
```
### 属性
| Property | Description | type | default |
| -------- | ------------------------------ | :-----: | :-----: |
| time | 倒计时时间差(单位:秒) | Number | 0 |
| step | 多久执行一次倒计时(单位:秒) | Number | 1 |
| switch | 倒计时开关 | Boolean | - - |
| format | 格式化 | String | - - |
### 方法
| Function Name | Description |
| :-----------: | ---------------------------------------------------- |
| on-end | 倒计时结束回调 |
| on-countdown | 每次倒计时回调 |
| reCountdown | 重新倒计时( ex: this.$refs.countdown.reCountdown() ) |