it-vue3-countdown
v1.0.4
Published
The Vue.js v3 Countdown Component
Downloads
15
Maintainers
Readme
it-vue3-countdown
Customize Countdown timer with Flip Animation for Vue 3.x
Table of contents
Installation
npm
npm i it-vue3-countdown --save
yarn
yarn add it-vue3-countdown --save
Global Usage
main.js
import { createApp } from 'vue'
import App from './App.vue'
import Countdown from 'it-vue3-countdown'
createApp(App).use(Countdown).mount('#app')
App.vue
<template>
<Countdown />
</template>
<script>
export default {
name: 'App',
components: {
Countdown,
}
}
</script>
Single File Component Usage
<template>
<Countdown />
</template>
<script>
import {Countdown} from 'it-vue3-countdown'
export default {
name: 'App',
components: {
Countdown
}
}
</script>
Emits
| Name | Description | | --- | --- | | timeElapsed | event that created when the time came |
Props
| Name | Type | Default | | --- | --- | --- | | deadlineISO | StringYYYY-MM-DDTHH:mm:ss.sssZ | | | deadline | StringYYYY-MM-DD HH:mm:ss | 32d,0h,0m,10s | | deadlineDate | Date | | | countdownSize | String | 3rem | | labelSize | String | 1.2rem | | flipAnimation | Boolean | true | | mainColor | String | '#EC685C' | | secondFlipColor | String | props.mainColor | | mainFlipBackgroundColor | String | '#222222' | | secondFlipBackgroundColor | String | '#393939' | | labelColor | String | '#222222' | | showLabels | Boolean | true | | stop | Boolean | | | showDays | Boolean | true | | showHours | Boolean | true | | showMinutes | Boolean | true | | showSeconds | Boolean | true | | labels | Object | {days: 'Days',hours: 'Hours',minutes: 'Minutes',seconds: 'Seconds',} |
Requirements
- Vue version 3.x.x