vue2-countdown-component/README.md

A Simple countdown component based on vue2

# 基于 Vue2 简单的倒计时组件

## 安装依赖

```
npm install vue2-countdown-component
```

## 全局引入

```
<CountdownTimer ref="countdownRef" :duration="10">
  <template #header>
    <span>头部插槽</span>
  </template>
  <template #footer>
    <span>尾部插槽</span>
  </template>
</CountdownTimer>

// main.js
import CountdownTimer from "vue2-countdown-component";
Vue.component("CountdownTimer", CountdownTimer);
```

## 按需引入

```
<CountdownTimer ref="countdownRef" :duration="10">
  <template #header>
    <span>头部插槽</span>
  </template>
  <template #footer>
    <span>尾部插槽</span>
  </template>
</CountdownTimer>


import CountdownTimer from "vue2-countdown-component";

export default{
  components:{
    CountdownTimer
  }
}
```

## 参数

```
duration: {
  type: Number,
  required: true,
  default: 60,
}
```

## 事件

| 序号 | 事件  | 描述       |
| ---- | ----- | ---------- |
| 1    | start | 倒计时开始 |
| 2    | end   | 倒计时结束 |
| 3    | stop  | 倒计时暂停 |

## 事件调用方法

```
 this.$refs.[ref].start(); // 开始
 this.$refs.[ref].stop(); // 暂停
```

## 事件监听

```
<countdown-timer ref="countdownRef" :duration="10"
@end="listenEnd" @stop="listenStop" >
</countdown-timer>

listenStop() {
  this.msg = "倒计时已暂停";
},
listenEnd() {
  this.msg = "倒计时已结束";
},
```

## 插槽

| 序号 | 事件   | 描述             |
| ---- | ------ | ---------------- |
| 1    | header | 自定义前面的内容 |
| 2    | footer | 自定义后面的内容 |