1

简介

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


淼淼真人
1.1k 声望202 粉丝

一个前端菜鸟!