vue pomodoro (番茄钟) 组件 - 基于vue2.x

简介

最近在开发的一个项目中,有使用番茄钟的需求,另外本人一直是一个番茄工作法的簇拥,所以就决定写一个基于vue 2.x开发的番茄钟组件。灵感来自于另一个组件vue-radial-progress。

效果图demo

效果图如下所示:
vue pomodoro (番茄钟) 组件 - 基于vue2.x_第1张图片

安装

npm install vue-pomodoro --save

用法

用法1



属性说明

Name Default value Description
totalPomodoro 4 计划的番茄时间个数
workDuration 25 工作时间(分钟).
restDuration 5 休息时间(分钟).
startColor #CCFFFF 番茄时钟运行时的渐变开始颜色.
stopColor #99CCCC 番茄时钟运行时的结束渐变颜色.
innerStrokeColor #0099CC 番茄钟的背景色.
strokeWidth 10 番茄钟的宽度.
innerTextColor #FF6666 番茄钟文字显示的颜色
diameter 300 番茄钟的直径大小(px)

相关链接

1.github链接
2.demo地址链接

你可能感兴趣的:(component,vue.js)