countdown

Typescript Countdown component for Vue 3.

Basic usage

<template>
<countdown:time="2 * 24 * 60 * 60 * 1000"v-slot="{ days, hours, minutes, seconds }">
Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.
</countdown>
</template>

Custom interval

<template>
<countdown:time="time":interval="100"v-slot="{ days, hours, minutes, seconds, milliseconds }">
New Year Countdown：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }}.{{ Math.floor(milliseconds / 100) }} seconds.
</countdown>
</template>
<script>import {defineComponent, ref} from'vue'exportdefaultdefineComponent({setup() {constnow=newDate();constnewYear=ref(newDate(now.getFullYear() +1, 0, 1));return { time: newYear - now, };	}})</script>

Countdown on demand

<template>
<buttontype="button"class="btn btn-primary":disabled="counting"@click="startCountdown">
<countdownv-if="counting":time="60000"@end="onCountdownEnd"v-slot="{ totalSeconds }">Fetch again {{ totalSeconds }} seconds later</countdown>
<spanv-else>Fetch Verification Code</span>
</button>
</template>
<script>import {ref, defineComponent} from'vue'exportdefaultdefineComponent({setup() {constcounting=ref(false)functionstartCountdown() { counting =true }functiononCountdownEnd() { counting =false }return { counting, startCountdown, onCountdownEnd }	}})</script>