blackteay/vue-flip-down
1
0
Fork 0
mirror of https://github.com/javaLuo/vue-flip-down.git synced 2025-04-05 19:41:54 +08:00
Code Issues Projects Releases Wiki Activity

1.0.1 增加了时间到了的事件

Browse Source
This commit is contained in:
luo 2018-10-23 11:58:42 +08:00
parent 414b3dedcf
commit a63ae0000f
5 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -24,10 +24,15 @@ import FlipDown from 'vue-flip-down';
### 参数 ### 参数
|名称|类型|默认|描述| | 名称 | 类型 | 默认 | 描述 |
|----|----|----|----| | ------- | ----------- | ---- | ------------------------------------------------------------------------------------- |
|endDate|Date/Number|0|结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数| | endDate | Date/Number | 0 | 结束的时间，即倒计时会从当前时间一直到endDate停止，可以是一个日期对象，也可以是毫秒数 |
|type|Number|4|要怎么显示倒计时：4-日时分秒，3-时分秒，2-分秒，1-秒| | type | Number | 4 | 要怎么显示倒计时：4-日时分秒，3-时分秒，2-分秒，1-秒 |
### 事件
| 名称 | 返回值 | 描述 |
| ------ | ------ | --------------------------------------- |
| timeUp | null | 当倒计时走到0时会触发一次，表示时间到了 |
### 说明 ### 说明

2
dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

8
example/src/app.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div> <div>
<CountDown :endDate="endDate" <CountDown :endDate="endDate"
:type="type" /> :type="type"
@timeUp="onTimeUp" />
<hr /> <hr />
<input v-model="type"> <input v-model="type">
@ -14,7 +15,7 @@ export default {
data() { data() {
return { return {
type: 4, type: 4,
endDate: new Date().getTime() + 100861100, endDate: new Date().getTime(),
}; };
}, },
components: { components: {
@ -24,6 +25,9 @@ export default {
onTypeChange(t) { onTypeChange(t) {
this.type = t; this.type = t;
}, },
onTimeUp() {
console.log('时间到了');
},
}, },
}; };
</script> </script>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-flip-down", "name": "vue-flip-down",
"version": "1.0.0", "version": "1.0.1",
"description": "vue 翻页效果的倒计时组件", "description": "vue 翻页效果的倒计时组件",
"main": "dist/main.js", "main": "dist/main.js",
"scripts": { "scripts": {

7
src/app.vue
View File

@ -139,7 +139,6 @@ export default {
// 开始倒计时 // 开始倒计时
start() { start() {
clearTimeout(this.timer); clearTimeout(this.timer);
console.log('每秒1次啊');
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
let t = this.endTime - new Date().getTime(); // 剩余的毫秒数 let t = this.endTime - new Date().getTime(); // 剩余的毫秒数
t = t < 0 ? 0 : t; t = t < 0 ? 0 : t;
@ -169,7 +168,11 @@ export default {
this.min = String(min).padStart(2, '0'); this.min = String(min).padStart(2, '0');
this.second = String(second).padStart(2, '0'); this.second = String(second).padStart(2, '0');
if (t > 0) this.start(); if (t > 0) {
this.start();
} else {
this.$emit('timeUp');
}
}, 1000); }, 1000);
}, },
// 日 动画结束 // 日 动画结束