Vue.jsでフリップ形式のカウントダウンタイマーを実装する「vue2-flip-countdown」

vue2-flip-countdownとは

vue2-flip-countdownは、フリップ形式のカウントダウンタイマーを実装できるコンポーネントライブラリです。

【動画サイズ：24KB】

環境

インストール

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

npm

npm i vue2-flip-countdown --save

UMD

<script src="https://cdn.jsdelivr.net/npm/vue2-flip-countdown@0.9.3/dist/vue2-flip-countdown.js"></script>

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

https://github.com/philipjkim/vue2-flip-countdown

導入手順

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

（1）ES6等の場合 [注意]モジュール版は未検証です。

import FlipCountdown from 'vue2-flip-countdown'

（2）UMDの場合

const FlipCountdown = window['vue2-flip-countdown'].default;

2.メソッドを設定

上記で取得したFlipCountdown をcomponentsに取り込みます。

new Vue({
  el: '#app',
  components: { 
    'flip-countdown': FlipCountdown 
  },
  data: {
    day: '2020-12-24 00:00:00'
  }
});
 

3. テンプレートを準備

<flip-countdown> を設置します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <flip-countdown :deadline="day"></flip-countdown>
</div>

サンプル

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

さいごに

フリップ形式のカウントダウンタイマーを実装できるコンポーネントライブラリでした。

今日はこの辺でー