vue-awesome-countdown でカウントダウンタイマーを設置する

はじめに

Vue で使えるカウントダウンタイマーのコンポーネント "vue-awesome-countdown" を紹介
https://vac.js.org/

前提

• 一定の日時まで自動的にカウントダウンを行うタイマーを設置する
• Vue のバージョンは 2.6.0+ とする

使ってみる

基本的な使い方

1. 導入する

   $ npm install vue-awesome-countdown
   

2. 使えるようにする

   import VueAwesomeCountdown from 'vue-awesome-countdown'
   
   Vue.use(VueAwesomeCountdown)
   

3. 使う

   <countdown
     :start-time="new Date()"
     :end-time="new Date(2022, 0, 1, 0, 0, 0)"
     auto-start
   >
     <template v-slot:process="{ timeObj }">
       <p>2022年まであと{{ timeObj.d }}日{{ timeObj.h }}時間{{ timeObj.m }}分{{ timeObj.s }}秒</p>
     </template>
   </countdown>
   

process スロットのスコープ内に存在する timeObj に時間の情報が入っている
すると↓こんな感じでリアルタイムでカウントダウンするタイマーが表示される（静止画ですがちゃんと秒読みします）

カウントダウン終了時に表示する内容を変更する

finish スロットに、タイマーが 0 になったときに表示する内容を記述しておくことができる（process スロットの内容の代わりに表示される）

<countdown
  :start-time="new Date()"
  :end-time="new Date(2022, 0, 1, 0, 0, 0)"
  auto-start
>
  <template v-slot:process="{ timeObj }">
    <p>2022年まであと{{ timeObj.d }}日{{ timeObj.h }}時間{{ timeObj.m }}分{{ timeObj.s }}秒</p>
  </template>
  <template v-slot:finish>
    <p>A HAPPY NEW YEAR !!</p>
  </template>
</countdown>