設定した日時までカウントダウンするコンポーネントです。
$ npm install --save vue-countdownify
import Countdownify from 'vue-countdownify';
import 'vue-countdownify/dist/vue-countdownify.css'
Name | Type | Required | Default | Description |
---|---|---|---|---|
msg | String | false | "終了" | ヘッダに表示される文字列。「{{msg}}まで」と表示される。 |
goal-time | String | true | - | カウントダウンする先の時刻。dayjsのコンストラクタに引数として渡すことができる形式で入力。 例: goal-time="2021-04-04T16:00:00.000Z" :goal-time="[2021, 5, 4]
|
backgroundColor | String | false | "black" | 背景色。color書式に則ります。 例: :background-color="red"
|
Name | Description |
---|---|
its-time | 設定時刻になるとイベントがEmitされます。引数にはEmit時点のdayjsオブジェクトが渡されます。例えばこのイベントを受け取ってイベントの画面へリダイレクトする等の使い方ができると思います。 |
README上部のGifを実現するコードは以下(App.vue
)。
<template>
<div id="app">
<Countdownify msg="イベント" :goalTime="Date.now() + 5000" @its-time="timeup"/>
</div>
</template>
<script>
import Countdownify from 'vue-countdownify';
import 'vue-countdownify/dist/vue-countdownify.css'
export default {
name: 'App',
components: {
Countdownify
},
methods: {
timeup(time) {
console.log("time is up!")
alert(time)
}
}
}
</script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#app {
height: 100%;
}
</style>