【vue-moment】vueでtimer設定する方法

目次

・vueでtimer設定をしたい
・timer設定するために必要なもの
・vue-momentのインストール
・vue-momentのtsファイル作成
・moment.tsを読み込む
・vueファイルでmomentを試してみる
・momentでtimer設定を試してみる

vueでtimer設定をしたい

vueで一定期間表示する枠や時期が来たら表示または非表示にするためにタイマー設定をして実装したい場合ってありますよね？
実際、私はその事例に当たったので今回対応したことをお伝えしたいと思います。

timer設定するために必要なもの

vueでtimer設定するために

vue-moment

を使用します。

vue-momentは、日付の解析・検証等をするライブラリで、
日付のフォーマットを「YYYY-MM-DD」に変更した場合や、日付の期間を検証するのに便利なメソッドが揃っています。
Vue.jsプロジェクトに便利なmoment.jsフィルターを提供してくれます。

vue-momentのインストール

npm

$ npm install vue-moment

yarn

$ yarn add vue-moment

インストールが終わったら共通で使えるようにjsファイルを作成します。

vue-momentのtsファイル作成

src/plugins/moment.ts

import Vue from 'vue'
Vue.use(require('vue-moment'))

ファイルを作成したらnuxt.configで読み込んでおきましょう。

moment.tsを読み込む

nuxt.config.ts

plugins: [{ src: '~/plugins/moment.ts' }],

pluginsに先ほど作成したmoment.tsを読み込んでおきます。

ここまでできたらあとは、vue側での実装です。

vueファイルでmomentを試してみる

<template>
    <p>
      {{ now }}
    </p>
    <p>
      {{ end }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$moment().format('YYYYMMDDHHmmss'),
      end: this.$moment().format('20200825150000'),
    }
  },
}
</script>

このようなファイルを作ると
nowは今の日時・時間・分・秒まで取得します。
今回はendとしてますが、表示を開始するなどの場合はstartなどにするといいと思います。
endには表示を終了する日時・時間・分・秒を設定しておきます。

この状態で上記を表示すると

See the Pen vue-moment by miyawash (@miyawash) on CodePen.

これをベースにタイマー設定をしてみます。

momentでtimer設定を試してみる

<template>
    <p>
      {{ now }}
    </p>
    <p>
      {{ end }}
    </p>
    <p v-if="now < end">まだ設定時間ではない</p>
    <p v-else>設定時間をすぎた</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$moment().format('YYYYMMDDHHmmss'),
      end: this.$moment().format('20200825150000'),
    }
  },
}
</script>

このように実装すると設定時間までは
「まだ設定時間ではない」が表示され、設定時間後は「設定時間をすぎた」が表示される
これにより、設定時間までの表示や設定時間からの表示などができるようになりました！

See the Pen vue-moment timer by miyawash (@miyawash) on CodePen.

参考資料
https://classic.yarnpkg.com/ja/package/vue-moment
https://www.npmjs.com/package/vue-moment
https://momentjs.com/
https://qiita.com/taizo/items/3a5505308ca2e303c099
https://blog.capilano-fw.com/?p=908#24_8_20