Vue的倒计时插件(vue-flip-down)

 今天在写前台的时候，考试系统需要一个倒计时功能，本来是想自己写一个的，但是最近事情太多，就到github上找了一个。还不错。虽然没有那么的花里胡俏，但是基本够用了。本博文仅仅记录一下。

示例

在线案列

 https://isluo.com/work/vue-filp-down/#/

安装

npm install vue-flip-down --save

或者

yarn add vue-flip-down 

使用

先导入组件

import FlipDown from 'vue-flip-down';

使用组件

 <FlipDown :endDate="finishTime" // 倒计时截止的日期
 					@timeUp="commitExamTest"   // 时间到了会触发timeUp事件
 					 :type="3" :theme="2" 
 					 :timeUnit="['时','分','秒']" 
 					 class="flip-down"   //自定义样式
 					 />

data(){
   return{
        finishTime: 1840212399971
    }
},
methods: {
	commitExamTest(){
         console.log("提交成功")
    }
}

相关参数

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

 :theme=“1” 合并式

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

 :theme=“2” 分离式

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

事件

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

说明

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

官方地址

 https://github.com/javaLuo/vue-flip-down