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

简介

最近在开发的一个项目中，有使用番茄钟的需求，另外本人一直是一个番茄工作法的簇拥，所以就决定写一个基于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）

相关链接

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