Vue.js的一个简单的可配置循环倒数计时器组件。
特征:
- 计时器模式:基于小时,分钟和秒的计时器。
- 单模式:以秒为单位的木材(单圆,没有小时和分钟)。
安装和下载:
# NPM
$ npm install vue-circular-count-down-timer --save
Props:
Props |
描述 |
initial-value |
计时器的初始值,以秒为单位。(需要) |
stroke-width |
圆圈笔触的粗细(以px为单位)。 |
seconds-stroke-color |
秒圈的笔触颜色。 |
minutes-stroke-color |
分钟圆圈的笔触颜色。 |
hours-stroke-color |
小时圆的笔触颜色。 |
underneath-stroke-color |
圆圈的空白部分的笔触颜色。 |
seconds-fill-color |
秒圈背景的颜色。 |
minutes-fill-color |
分钟圆圈背景的颜色。 |
hours-fill-color |
时数圈背景的颜色。 |
size |
圆圈的宽度和高度(以px为单位)。 |
padding |
圆圈之间的间距,以px为单位。 |
hour-label |
小时圆的标签。 |
minute-label |
分钟圈的标签。 |
second-label |
秒圈的标签。 |
show-second |
是否显示秒圈。 |
show-minute |
是否显示分钟圈。 |
show-hour |
是否显示小时数圈。 |
show-negatives |
达到零后继续计数。 |
steps |
单模式使用中的步骤数。 |
paused |
暂停计数。 |
notify-every |
确定触发更新事件的间隔。可能的值:秒,分钟,小时,无。分钟和小时仅在计时器模式下有效。 |
事件
事件 |
描述 |
finish |
当计数器达到零时触发。 |
update |
每次计数时触发。 |
方法
方法 |
描述 |
updateTime(seconds) |
将秒数添加到倒计时值。使用正整数或负整数。 |