https://github.com/ofcold/countdown

Typescript Countdown component for Vue 3.
https://github.com/ofcold/countdown

Last synced: about 2 months ago
JSON representation

Typescript Countdown component for Vue 3.

• Host: GitHub
• URL: https://github.com/ofcold/countdown
• Owner: ofcold
• License: mit
• Created: 2021-06-11T07:01:58.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-18T10:30:49.000Z (almost 5 years ago)
• Last Synced: 2025-05-26T14:12:23.737Z (10 months ago)
• Language: Vue
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# countdown

Typescript Countdown component for Vue 3.

## Basic usage

```vue

	

		Time Remaining：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds.

	

```

## Custom interval

```vue

	

		New Year Countdown：{{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }}.{{ Math.floor(milliseconds / 100) }} seconds.

	

import {defineComponent, ref} from 'vue'

export default defineComponent({

	setup() {

		const now = new Date();

		const newYear = ref(new Date(now.getFullYear() + 1, 0, 1));

		return {

			time: newYear - now,

		};

	}

})

```

## Countdown on demand

```vue

	

		Fetch again {{ totalSeconds }} seconds later

		Fetch Verification Code

	

import {ref, defineComponent} from 'vue'

export default defineComponent({

	setup() {

		const counting = ref(false)

		function startCountdown() {

			counting = true

		}

		function onCountdownEnd() {

			counting = false

		}

		return {

			counting,

			startCountdown,

			onCountdownEnd

		}

	}

})

```