# aw-clock-timer

**Repository Path**: hbowen/aw-clock-timer

## Basic Information

- **Project Name**: aw-clock-timer
- **Description**: 一个基于VUE的自定义计时器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-09
- **Last Updated**: 2022-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: npm, webpack

## README

# 可调节的倒计时组件

### 效果展示：
![输入图片说明](https://gitee.com/hbowen/reusable-components/raw/master/live/%E5%80%92%E8%AE%A1%E6%97%B6%E7%BB%84%E4%BB%B6/%E5%80%92%E8%AE%A1%E6%97%B6%E7%BB%84%E4%BB%B6%E9%A2%84%E8%A7%88%E5%9B%BE.png)


#### 介绍

这是一个可调节的倒计时组件

#### 使用说明

```bash
1.  安装插件 npm i aw-clock-timer

2. 在需要使用的页面上导入 import clockTimer from 'aw-clock-timer' 导入

3. components: {  # 注册组件
      clockTimer
  },
# vue文件中使用
4. <clockTimer ref="clockTimer"/>

5. 唤起显示此组件 this.$refs.clockTimer.show()
```

### Events 事件
<br>

| 事件名称 | 说明                      | 回调参数                                                                      |
| -------- | ------------------------- | ----------------------------------------------------------------------------- |
| close    | 点击关闭时触发            | 当前倒计时剩余秒数                                                            |
| start    | 点击开始计时时触发        | 当前倒计时剩余秒数                                                            |
| keep     | 点击继续时触发            | 当前倒计时剩余秒数                                                            |
| reset    | 点击 重置/重新计时 时触发 | 当前倒计时剩余秒数                                                            |
| stop     | 点击暂停时触发            | 当前倒计时剩余秒数                                                            |
| change   | 在 调节倒计时值 时触发    | data { <br> time: 当前调节时间的秒数 <br> type: 增加(add)还是减少(minus) <br> } |

<br/>

```bash
Events事件使用示例：

 <clockTimer ref="clockTimer" @close="close"/>
```