简介
最近在开发的一个项目中,有使用番茄钟的需求,另外本人一直是一个番茄工作法的簇拥,所以就决定写一个基于vue 2.x开发的番茄钟组件。灵感来自于另一个组件。
效果图demo
效果图如下所示:
安装
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) |