Vg-Countdown
This component is only for Vue.js 3+
This is a component countdown.
Installation
npm install @vemlavaraloucagamers/vg-countdown
# or
yarn add @vemlavaraloucagamers/vg-countdownUsage
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VgCountdown from '@vemlavaraloucagamers/vg-countdown'
import "@vemlavaraloucagamers/vg-countdown/dist/style.css";
const app = createApp(App)
app.use(VgCountdown)
app.mount('#app')// page.vue
<template>
<VgCountdown />
</template>
<template>
<vg-countdown />
</template>
<template>
<vg-countdown></vg-countdown>
</template>Props
Items with an (*) mean they are required
| name | Value type | Default | Description |
|---|---|---|---|
| vgId (*) | String | Sets the id attribute to differentiate from other components | |
| day (*) | Number | 0 | Completion day, from 1 to 31 |
| month (*) | String | jan | Completion month, jan to dec |
| year (*) | Number | 9999 | Completion year, from an integer value representing a year to the number 9999 |
| hour (*) | Number | 0 | Completion hour, from 1 to 31 |
| minute (*) | Number | 0 | Completion minute, from 1 to 31 |
| second (*) | Number | 0 | Completion second, from 1 to 31 |
| daysText | String | 'day' | The text that will appear under the number |
| hoursText | String | 'hours' | The text that will appear under the number |
| minutesText | String | 'minutes' | The text that will appear under the number |
| secondsText | String | 'seconds' | The text that will appear under the number |
| showDays | Boolean | true | Defines whether or not to show the daysText |
| showHours | Boolean | true | Defines whether or not to show the hoursText |
| showMinutes | Boolean | true | Defines whether or not to show the minutesText |
| showSeconds | Boolean | true | Defines whether or not to show the secondsText |
| numberColor | String | '#000' | Sets the color of numbers |
| textColor | String | '#000' | Sets the color of texts |
| border | Boolean | false | Defines whether or not to show the border |
| borderColor | String | '#000' | Sets the color of border |
| separator | Boolean | false | Defines whether or not to show the separator |
| separatorType | String | ':' | Sets the type of separator |
Events
| name | Return type | Description |
|---|---|---|
| started | Boolean | Triggered when the countdown is started |
| finished | Boolean | Triggered when the countdown is finished |
Example
// page.vue
<template>
<VgCountdown
vg-id="vg-countdown"
:day="14"
month="oct"
:year="2024"
:hour="19"
:minute="44"
:second="10"
border-color="blue"
text-color="blue"
border
separator
separator-type="/"
@started="somethingWhenStarting"
@finished="somethingAtTheEnd"
/>
</template>
<script setup>
const somethingWhenStarting = () => {
console.log('VgCountdown Started')
}
const somethingAtTheEnd = () => {
console.log('VgCountdown Finished')
}
return {
somethingWhenStarting,
somethingAtTheEnd
}
</script># console when starting
VgCountdown Started# console at the end
VgCountdown Finished