今天在写前台的时候,考试系统需要一个倒计时功能,本来是想自己写一个的,但是最近事情太多,就到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,当倒计时结束后,就会停止循环。但可以动态改变日期,倒计时又会被激活。
- 基于本地时间做对比