Vue 3.x 带有翻转动画的倒数计时器 - vue3-flip-countdown

Vue 3.x 带有翻转动画的倒数计时器 - vue3-flip-countdown
插件名称 vue3-flip-countdown
发布时间 2021年11月22日
插件作者 coskuncayemre

用于 Vue 3.x 应用程序的带有翻转动画的自定义倒数计时器。

安装和下载:

# NPM
$ npm i vue3-flip-countdown

使用:

1. 导入并注册组件。

import { createApp } from 'vue'
import App from './App.vue'
import Countdown from 'vue3-flip-countdown'
createApp(App).use(Countdown).mount('#app')

2. 在模板中添加倒数计时器。

<vue3-flip-countdown />

3. 可用道具来配置倒计时。

deadline: {
  type: String,
  required: false,
  default: moment()
      .add(32, "d")
      .add(10, "s")
      .format(fmt),
},
deadlineISO: {
  type: String,
  required: false,
},
deadlineDate: {
  type: Date,
  required: false,
},
countdownSize:{
  type:String,
  required:false,
  // default:"2.2rem"
},
labelSize:{
  type:String,
  required:false,
  // default:"2.2rem"
},
stop: {
  type: Boolean,
  required: false,
},
flipAnimation: {
  type: Boolean,
  required: false,
  default: true,
},
showDays: {
  type: Boolean,
  required: false,
  default: true,
},
showHours: {
  type: Boolean,
  required: false,
  default: true,
},
showMinutes: {
  type: Boolean,
  required: false,
  default: true,
},
showSeconds: {
  type: Boolean,
  required: false,
  default: true,
},
showLabels: {
  type: Boolean,
  required: false,
  default: true,
},
labels: {
  type: Object,
  required: false,
  default: function () {
      return {
          days: 'Days',
          hours: 'Hours',
          minutes: 'Minutes',
          seconds: 'Seconds',
      };
  },
},
mainColor: {
  type: String,
  default: '#EC685C'
},
secondFlipColor: {
  type: String,
  default: (props) => props.mainColor,
},
mainFlipBackgroundColor: {
  type: String,
  default: '#222222'
},
secondFlipBackgroundColor: {
  type: String,
  default: '#393939'
},
labelColor: {
  type: String,
  default: '#222222'
}