https://github.com/tomieric/vue-flip-countdown
vite,vue3,fork https://github.com/philipjkim/vue2-flip-countdown
https://github.com/tomieric/vue-flip-countdown
vite vue3
Last synced: about 2 months ago
JSON representation
vite,vue3,fork https://github.com/philipjkim/vue2-flip-countdown
- Host: GitHub
- URL: https://github.com/tomieric/vue-flip-countdown
- Owner: tomieric
- License: mit
- Created: 2020-10-31T13:29:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-11-01T07:33:59.000Z (over 4 years ago)
- Last Synced: 2025-03-11T19:45:48.937Z (2 months ago)
- Topics: vite, vue3
- Language: Vue
- Homepage: https://tomieric.github.io/vue-flip-countdown/
- Size: 134 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-flip-countdown
It's using:
* `vite`
* `vue`
fork [vue2-flip-countdown](https://github.com/philipjkim/vue2-flip-countdown), copy that!
[show Demo](https://tomieric.github.io/vue-flip-countdown/)
## Installation
```shell
yarn add @tomieric/vue-flip-countdown
```
## Usage
```javascript
DEFAULTS
Not show days
Slot content
:
:
import { defineComponent, ref } from 'vue'
import flipCountdown from '@tomieric/vue-flip-countdown'
export default defineComponent({
name: 'App',
components: {
flipCountdown
},
setup () {
const dateStr = new Date(Date.now() + 24 * 60 * 60 * 1000).toLocaleString()
const targetTime = [dateStr.split(' ')[0], ' ', '23:59:59'].join('')
const deadline = ref(targetTime)
function timeElapsedHandler () {
console.log(`timeElapsedHandler`)
}
return {
deadline,
timeElapsedHandler
}
}
})
```
## OPTIONS
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| deadline | the end time | `String` | the date string | `-` |
| stop | stop flip animation | `Boolean` | `true/false` | `false` |
| showDays | display days card | `Boolean` | `true/false` | `true` |
| showHours | display hours card | `Boolean` | `true/false` | `true` |
| showMinutes | display minutes card | `Boolean` | `true/false` | `true` |
| showSeconds | display seconds card | `Boolean` | `true/false`| `true` |
| labels | the alias name of labels | `Object` | `{days: '天' }` | `-` |
| showSlot | This display card text | `Boolean` | `true/false` | `true` |
## development
```
yarn dev
```
## production
```
yarn lib
```