• Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language Vue
  • Created about 6 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

vue 翻页倒计时组件 妙啊

vue-flip-down npm npm

这是一个简单的翻页倒计时vue组件,项目中有用到,所以提取了一下。
你们也可以直接把src/app.vue文件拷贝到项目里直接用,就是个普通vue组件,就不用npm install

注意:vue2.x 和 vue3.x

vue-flip-down 1.x的版本仅适用于vue2.x
vue-flip-down 3.x的版本仅适用于vue3.x

示例

img

在线DEMO

https://isluo.com/work/vue-flip-down/

安装

npm install vue-flip-down --save

使用

import FlipDown from 'vue-flip-down';

<FlipDown
  :endDate="1540212399971"  // 倒计时截止的日期
  @timeUp="func"            // 时间到了会触发timeUp事件
/>

参数

名称 类型 默认 描述
endDate Date/Number 0 结束的时间,即倒计时会从当前时间一直到endDate停止,可以是一个日期对象,也可以是毫秒数
type Number 4 要怎么显示倒计时:4-日时分秒,3-时分秒,2-分秒,1-秒
theme Number 1 样式:1-合并,2-分离。见下图
timeUnit Array [] 时间单位,显示在空隙之间的文字,比如:['天','时','分','秒'] 或 [':',':',':']

:theme="1" 合并式

img

合并式的,每个不同的时间单位是合在一起的

:theme="2" 分离式

img

分离式的,每个数字都是单独分开的

事件

名称 返回值 描述
timeUp null 当倒计时走到0时会触发一次,表示时间到了

说明

  • 内部使用了setTimeout,当倒计时结束后,就会停止循环。但可以动态改变日期,倒计时又会被激活。
  • 基于本地时间做对比