简介

本人一直是一个番茄工作法的簇拥，所以决定写一个基于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地址链接