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构建。
使用的技术/模块 (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动态计时器