简介
最近在开发的一个项目中,有使用番茄钟的需求,另外本人一直是一个番茄工作法的簇拥,所以就决定写一个基于vue 2.x开发的番茄钟组件。灵感来自于另一个组件vue-radial-progress。
效果图demo
效果图如下所示:
安装
npm install vue-pomodoro --save
用法
用法1
<template>
<Pomodoro :total-pomodoro = "totalPomodoro"
:work-duration = "25"
:diameter = "diameter">
</Pomodoro>
</template>
<script>
import Pomodoro from 'vue-pomodoro'
export default {
data () {
return {
diameter: 300
totalPomodoro: 4
}
},
components: {
Pomodoro
}
}
</script>
属性说明
Name | Default value | Description |
---|---|---|
totalPomodoro |
4 |
计划的番茄时间个数 |
workDuration |
25 |
工作时间(分钟). |
restDuration |
5 |
休息时间(分钟). |
startColor |
#CCFFFF |
番茄时钟运行时的渐变开始颜色. |
stopColor |
#99CCCC |
番茄时钟运行时的结束渐变颜色. |
innerStrokeColor |
#0099CC |
番茄钟的背景色. |
strokeWidth |
10 |
番茄钟的宽度. |
innerTextColor |
#FF6666 |
番茄钟文字显示的颜色 |
diameter |
300 |
番茄钟的直径大小(px) |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。