Vue.jsでカウントダウンを実装するときに使ったのでメモ。
環境
vue@2.6.14
nuxt@2.15.8
インストールする
yarn add vue-awesome-countdown
設定
plugins/vue-awesome-countdown.jsを作成
import Vue from 'vue'
import VueAwesomeCountdown from 'vue-awesome-countdown'
Vue.use(VueAwesomeCountdown, 'vac')
nuxt.config.jsを修正
pluginsに追記する
{ src: '@/plugins/vue-awesome-countdown.js', mode: 'client' }
実装！
vue-awesome-countdown#usage
上記のSSR (Nuxt)を参考に実装しました。
今回はミリ秒まで表示したかったので、表示や速度を変更しています。
endTimeで時間をミリ秒で設定
speedで速度を指定。今回はミリ秒まで表示したかったので、10に。
@finishでカウントダウンが終了したらafterFinishの処理が実行されるように指定。
<no-ssr>
<vac
:end-time="new Date().getTime() + 60000"
:speed="10"
@finish="afterFinish"
>
<span
slot="process"
slot-scope="{ timeObj }"
>
{{ `Lefttime: ${timeObj.m}:${timeObj.s}.${timeObj.ms}` }}
</span>
<span slot="finish">Done!</span>
</vac>
</no-ssr>
<script>
export default {
...省略
methods: {
afterFinish () {
// 終了後の処理
}
}
}
</script>
timeObjの中身はこんな風になってました！
{
"endTime": 1668493899311,
"speed": 10,
"leftTime": 55072,
"d": "0",
"h": "00",
"m": "00",
"s": "55",
"ms": "072",
"org": {
"d": 0.0006374074074074074,
"h": 0.015297777777777778,
"m": 0.9178666666666667,
"s": 55.072,
"ms": 72
},
"ceil": {
"d": 1,
"h": 1,
"m": 1,
"s": 56
}
}