カウントダウンタイマーを「vuemodoro」で実装する

vuemodoroとは

 

vuemodoroはカウントダウンタイマーコンポーネントです。
二種類のスタイルを備えておいます。
タイマーは、分秒の単位で設定することが可能です。

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install --save vuemodoro

CDN

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

 

gitリポジトリは以下から取得できます。

https://github.com/P3trur0/vuemodoro

 

導入手順

カウントダウンタイマーを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import Pomodoro from 'vuemodoro';

（2）WEBページの場合

なし

2.メソッドを設定

let app = new Vue({
  el: '#app',
  data: {
    minutes: 3,
    pomodoroLabel: 'カウントダウン',
    startLabel: 'スタート', 
    pauseLabel: 'ストップ',
    resetLabel: 'リセット',
    theme: 'light'
  }
});

3. <Pomodoro>テンプレートを準備

<div id="app">
  <Pomodoro :minutes="minutes" 
            :pomodoro-label="pomodoroLabel" 
            :start-label="startLabel" 
            :pause-label="pauseLabel" 
            :reset-label="resetLabel" 
            :theme="theme" />
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

カウントダウンタイマーコンポーネントでした。

今日はこの辺でー