实现Pomodoro计时器的Vue组件

维莫多罗 (vuemodoro)

SFC Vue component implementing a Pomodoro timer.

实现Pomodoro计时器的SFC Vue组件。

View Demo 查看演示 Download Source 下载源

Vuemodoro is a Vue Single File Component implementing a countdown timer, intended to provide a Pomodoro countdown in your Vue applications. It comes with a set of properties making the component customizable for your needs. For example, you can customize either the duration of the countdown or the labels of the buttons for interacting with the component. Moreover, you can choose between different styles for your Vuemodoro look and feel. 🍅

Vuemodoro是实现倒计时计时器的Vue单文件组件，旨在在您的Vue应用程序中提供Pomodoro倒计时。 它带有一组属性，使该组件可根据您的需求进行自定义。 例如，您可以自定义倒计时的持续时间或自定义按钮以与组件进行交互。 此外，您可以在Vuemodoro外观和感觉的不同样式之间进行选择。 🍅

物产 (Properties)

If you need to customize the Pomodoro timer behavior, you can use one of the following optional properties.

如果需要自定义Pomodoro计时器行为，则可以使用以下可选属性之一。

Properties	Default	Description	Type
minutes	25	sets the minutes of the countdown	Number
seconds	0	sets the seconds of the countdown	Number
pomodoro-label	Pomodoro Timer	adds a descriptive label to the timer container	String
start-label	Start	adds a descriptive label to the start button of the timer	String
pause-label	Pause	adds a descriptive label to the pause button of the timer	String
reset-label	Reset	adds a descriptive label to the reset button of the timer	String
muted	false	defines if the timer must play a sound when the countdown ends.	Boolean
theme	dark	defines the styles of the timer. It comes with three different styles. bare, light and dark are the available options.	String

物产	默认	描述	类型
分钟	25	设置倒数分钟	数
秒	0	设置倒数秒	数
番茄标记	Pomodoro Timer	向计时器容器添加描述性标签	串
开始标签	Start	在计时器的开始按钮上添加描述性标签	串
暂停标签	Pause	在计时器的暂停按钮上添加描述性标签	串
重置标签	Reset	在计时器的重置按钮上添加描述性标签	串
静音	false	定义倒计时结束时计时器是否必须播放声音。	布尔型
主题	dark	定义计时器的样式。 它具有三种不同的样式。 bare ， light和dark是可用的选项。	串

安装 (Installation)

You can install Vuemodoro using npm:

您可以使用npm安装Vuemodoro：

npm install --save vuemodoro

Alternatively, you can import vuemodoro via <script> tag in the browser directly, avoiding the NPM installation:

或者，您可以直接在浏览器中通过<script>标记导入vuemodoro ，而无需安装NPM：

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuemodoro"></script>

用法 (Usage)

Once installed, it is easy to use it.

一旦安装，就很容易使用。

导入组件 (Importing the component)

First, you need to import vuemodoro in your files. You can do that in different ways. For example, it can be imported into a build process for use in full-fledged Vue applications:

首先，您需要在文件中导入vuemodoro 。 您可以用不同的方式来做。 例如，可以将其导入到构建过程中，以在成熟的Vue应用程序中使用：

import Pomodoro from 'vuemodoro';

export default {
  components: {
    Pomodoro,
  },
  // rest of the component
}

使用组件 (Using the component)

Once imported, you can use your component as follows:

导入后，可以按以下方式使用组件：

<Pomodoro/>

主题 (Themes)

Vuemodoro comes with a theme prop. It allows to modify the look and feel of the component. The available options are:

Vuemodoro带有theme道具。 它允许修改组件的外观。 可用的选项有：

• bare, it is a minimal look and feel, intended for customization:

  bare ，这是最小的外观和感觉，旨在进行定制：

• light, it is the light theme of Vuemodoro:

  light ，这是Vuemodoro的light主题：

• dark, it is the dark theme of Vuemodoro:

  dark ，这是Vuemodoro的黑暗主题：

翻译自: https://vuejsexamples.com/vue-component-implementing-a-pomodoro-timer/