vue.js动态计时器_基于Vue.js的Pomodoro技术计时器

vue.js动态计时器

番茄 (pomodoro)

Timer for Pomodoro Technique built on Vue.js 2.0 with PWA

基于PWA的Vue.js 2.0构建的Pomodoro技术计时器

Built using Vue.js 2.0 with PWA (Progressive Web Apps) and Bootstrap 4.

使用带有PWA(渐进式Web应用程序)和Bootstrap 4的Vue.js 2.0构建。

View demo 查看演示 Download Source 下载源

使用的技术/模块 (Technologies/Modules used)

• Vue.js 2.0

  Vue.js 2.0

• Vue Router

  Vue路由器

• Vuex

  威克斯

• Bootstrap 4 Beta 2 (css only)

  Bootstrap 4 Beta 2(仅限CSS)

• Bootstrap Vue

  Bootstrap Vue

特征 (Features)

• 25 minutes Pomodoro interval

  25分钟番茄时间间隔

• 5 minutes Short Break interval

  5分钟短暂休息时间

• 20 minutes Long Break interval

  20分钟长休息间隔

• Different timer text color during break time

  休息时间不同的计时器文字颜色

• Toggle Sound

  切换声音

• Toggle Autostart Next Interval

  切换下一个间隔自动启动

• Intervals completed log

  间隔完成日志

• Responsive

  React灵敏

查询字符串配置 (Query string configurations)

Function	Parameter	Default	Setting
Whether to start next interval when the current one is completed	autonext	off	on/off
Start timer immediately	autostart	off	on/off
Play sound when the current interval is completed	sound	on	on/off

功能	参数	默认	设置
当前间隔完成后是否开始下一个间隔	自动下一步	关	开关
立即启动计时器	自动启动	关	开关
当前间隔完成时播放声音	声音	上	开关

使用技巧 (Usage Tip)

To open this app in a small window on a desktop machine, type the following into the browser address bar or create a bookmark:

要在台式机的小窗口中打开此应用，请在浏览器地址栏中输入以下内容或创建书签：

**javascript:window.open('https://pomodoro-timer.github.io', 'pomodoro', 'height=350,width=400')**

Note #1: Sometimes browser will skip the front javascript: during paste, type this in manually if necessary.

注意＃1：有时浏览器会跳过前面的javascript：在粘贴过程中，如有必要，请手动键入。

Note #2: Some browsers might not support all the features if invoked this way. For example Microsoft Edge does not support window sizing.

注意＃2：如果以这种方式调用某些浏览器，则可能不支持所有功能。 例如，Microsoft Edge不支持窗口大小调整。

构建设置 (Build Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

翻译自: https://vuejsexamples.com/timer-for-pomodoro-technique-built-on-vue-js/

vue.js动态计时器