简介

本人一直是一个番茄工作法的簇拥，所以决定写一个基于vue 2.x开发的番茄钟 demo 来练练手。灵感来自于另一个组件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地址链接