Vue.js的循环倒数计时器 – vue-circular-count-down-timer

Vue.js的循环倒数计时器 – vue-circular-count-down-timer

插件名称:vue-circular-count-down-timer

发布时间:2020年5月7日

插件作者:noorzaie

官网 GitHub下载

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) 将秒数添加到倒计时值。使用正整数或负整数。
相关插件