シンプルなカウントダウンタイマー「vue-awesome-countdown」

vue-awesome-countdownとは

vue-awesome-countdownは、豊富なスロットとメソッドを備えた超軽量なカウントダウンタイマーです。
プロセス全体と予想される終了時間との間のエラーは、わずか1〜3ミリ秒と高精度を誇っています。

インストール

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

npm

npm install vue-awesome-countdown --save

yarn

yarn add vue-awesome-countdown

CDN

<script src="https://unpkg.com/vue-awesome-countdown@latest"></script>

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

https://github.com/mlinquan/vue-awesome-countdown

導入手順

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

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

import vueAwesomeCountdown from 'vue-awesome-countdown'

（2）WEBページの場合

const vueAwesomeCountdown = window['vue-awesome-countdown'].default;

2.メソッドを設定

Vue.useに上記で取得した vueAwesomeCountdown を読み込ませます。

startCountdown 、 stopCountdown 、switchCountdown のメソッドを準備します。

Vue.use(vueAwesomeCountdown);

let app = new Vue({
  el: '#app',
  methods: {
    doRestart: function(){
      this.$refs.cnt.startCountdown(true)
    },
    doStop: function(){
      this.$refs.cnt.stopCountdown()
    },
    doSwitch: function(){
      this.$refs.cnt.switchCountdown()
    }
  }
});

3. テンプレートを準備

<countdown> でカウントダウンコンポーネントを呼び出します。

auto-start をfalseにすることで自動スタート機能を停止させます。

left-time にミリ秒でカウントダウン時間を設定します。

<div id="app">
  <button @click="doRestart">スタート</button>
  <button @click="doStop">ストップ</button>
  <button @click="doSwitch">[再開]ー[一時停止]</button>
  <countdown :left-time="3000" :auto-start="false" ref="cnt">
    <div
      slot="process"
      slot-scope="anyYouWantedScopName">{{ `カウント: ${anyYouWantedScopName.timeObj.ceil.s}` }}</div>
    <div slot="finish">
      <span>Done!</span>
    </div>
  </countdown>
</div>

サンプル

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

さいごに

豊富なスロットとメソッドを備えた超軽量なカウントダウンタイマーでした。

簡単な実装までしか試していないのですが、解説を見た感じだと色々できそうな予感します。

今日はこの辺でー