blackteay/vue-flip-down
1
0
Fork 0
mirror of https://github.com/javaLuo/vue-flip-down.git synced 2025-04-06 03:58:09 +08:00
Code Issues Projects Releases Wiki Activity

1.0.4 处理了一下初始化时的状态

Browse Source
This commit is contained in:
L 2019-02-19 15:29:05 +08:00
parent 1a1e556e22
commit 6145c56fdd
4 changed files with 109 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

18
example/src/app.vue
View File

@ -2,8 +2,8 @@
<div> <div>
<CountDown :endDate="endDate" <CountDown :endDate="endDate"
:type="type" :type="type"
:theme="21" :theme="2"
:timeUnit="['天','时','分','秒']"
@timeUp="onTimeUp" /> @timeUp="onTimeUp" />
<hr /> <hr />
@ -12,24 +12,24 @@
</div> </div>
</template> </template>
<script> <script>
import CountDown from '../../dist/main.js'; import CountDown from "../../dist/main.js";
export default { export default {
data() { data() {
return { return {
type: 4, type: 2,
endDate: new Date().getTime() + 30000, endDate: new Date().getTime() + 30000
}; };
}, },
components: { components: {
CountDown, CountDown
}, },
methods: { methods: {
onTypeChange(t) { onTypeChange(t) {
this.type = t; this.type = t;
}, },
onTimeUp() { onTimeUp() {
console.log('时间到了'); console.log("时间到了");
}, }
}, }
}; };
</script> </script>

2
package.json
View File

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

151
src/app.vue
View File

@ -2,21 +2,24 @@
<template> <template>
<div :class="['vue-countdown-component', {'theme2': theme !== 1}]"> <div :class="['vue-countdown-component', {'theme2': theme !== 1}]">
<template v-for="(item, index) in timeArray"> <template v-for="(item, index) in timeArray">
<div :class="['time-box']" :key="index"> <div :class="['time-box']"
:key="index">
{{item}} {{item}}
<div :class="['b0',{'anime': isAnimate[index]}]"> <div :class="['b0',{'anime': isAnimate[index]}]">
<div>{{item}}</div> <div>{{item}}</div>
</div> </div>
<div :class="['a0',{'anime': isAnimate[index]}]" <div :class="['a0',{'anime': isAnimate[index]}]"
@animationend="onAnimateEnd(index)"> @animationend="onAnimateEnd(index)">
<div>{{timeArrayT[index]}}</div> <div>{{timeArrayT[index]}}</div>
</div> </div>
<div class="a1"> <div class="a1">
<div>{{timeArrayT[index]}}</div> <div>{{timeArrayT[index]}}</div>
</div> </div>
</div> </div>
<div class="time-unit" v-if="isTimeUnitShow(index)"> <div class="time-unit"
{{setTimeUnit(index)}} :key="`unit-${index}`"
v-if="isTimeUnitShow(index)">
{{setTimeUnit(index)}}
</div> </div>
</template> </template>
</div> </div>
@ -26,16 +29,25 @@
export default { export default {
data() { data() {
return { return {
timeArray: ['00','00','00','00'], timeArray:
timeArrayT: ['00','00','00','00'], this.theme === 2
isAnimate:[false,false,false,false], ? new Array(this.type * 2).fill("0")
: new Array(this.type).fill("00"),
timeArrayT:
this.theme === 2
? new Array(this.type * 2).fill("0")
: new Array(this.type).fill("00"),
isAnimate:
this.theme === 2
? new Array(this.type * 2).fill(false)
: new Array(this.type).fill(false)
}; };
}, },
props: { props: {
endDate: { type: [Date, Number, String], default: 0 }, // 截止时间 endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1 type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1
theme: {type: [Number, String], default: 1}, theme: { type: [Number, String], default: 1 },
timeUnit: {type: Array, default: ()=>[]}, timeUnit: { type: Array, default: () => [] }
}, },
computed: { computed: {
endTime() { endTime() {
@ -44,28 +56,33 @@ export default {
} }
return Number(this.endDate) > 0 ? Number(this.endDate) : 0; return Number(this.endDate) > 0 ? Number(this.endDate) : 0;
}, },
step(){ step() {
return this.theme === 1 ? 1 : 2; return this.theme === 1 ? 1 : 2;
}, },
arr(){ arr() {
const length = this.timeArray.length; const length = this.timeArray.length;
const step = this.step; const step = this.step;
const temp = [length - 1, length - step - 1, length - step * 2 -1, length - step * 3 - 1]; const temp = [
length - 1,
length - step - 1,
length - step * 2 - 1,
length - step * 3 - 1
];
temp.length = this.type > 1 ? this.type : 1; temp.length = this.type > 1 ? this.type : 1;
return temp; return temp;
} }
}, },
watch: { watch: {
timeArray(newV,oldV){ timeArray(newV, oldV) {
const diff = []; const diff = [];
newV.forEach((value,index)=>{ newV.forEach((value, index) => {
if(value !== oldV[index]){ if (value !== oldV[index]) {
this.$set(this.isAnimate, index, true); this.$set(this.isAnimate, index, true);
diff.push({value,index}); diff.push({ value, index });
} }
}); });
setTimeout(() => { setTimeout(() => {
diff.forEach((item)=>{ diff.forEach(item => {
this.$set(this.timeArrayT, item.index, item.value); this.$set(this.timeArrayT, item.index, item.value);
}); });
}, 350); }, 350);
@ -74,7 +91,7 @@ export default {
if (newV > 0) { if (newV > 0) {
this.start(true); this.start(true);
} }
}, }
}, },
mounted() { mounted() {
@ -112,50 +129,76 @@ export default {
} }
let arr = []; let arr = [];
if(Number(this.theme) === 1){ // 不分开 if (Number(this.theme) === 1) {
type>= 4 && arr.push(String(day).padStart(2, '0')); // 不分开
type>= 3 && arr.push(String(hour).padStart(2, '0')); type >= 4 && arr.push(String(day).padStart(2, "0"));
type>= 2 && arr.push(String(min).padStart(2, '0')); type >= 3 && arr.push(String(hour).padStart(2, "0"));
arr.push(String(second).padStart(2, '0')); type >= 2 && arr.push(String(min).padStart(2, "0"));
} else { // 分开 arr.push(String(second).padStart(2, "0"));
type>= 4 && arr.push(...String(day).padStart(2, '0').split('')); } else {
type>= 3 && arr.push(...String(hour).padStart(2, '0').split('')); // 分开
type>= 2 && arr.push(...String(min).padStart(2, '0').split('')); type >= 4 &&
arr.push(...String(second).padStart(2, '0').split('')); arr.push(
...String(day)
.padStart(2, "0")
.split("")
);
type >= 3 &&
arr.push(
...String(hour)
.padStart(2, "0")
.split("")
);
type >= 2 &&
arr.push(
...String(min)
.padStart(2, "0")
.split("")
);
arr.push(
...String(second)
.padStart(2, "0")
.split("")
);
} }
this.timeArray = arr; this.timeArray = arr;
if(isFirst){ if (isFirst) {
this.timeArrayT = [...this.timeArray]; this.timeArrayT = [...this.timeArray];
this.isAnimate = new Array(this.timeArray.length).fill(false); this.isAnimate = new Array(this.timeArray.length).fill(false);
} }
if (t > 0) { if (t > 0) {
this.start(); this.start();
} else { } else {
this.$emit('timeUp'); this.$emit("timeUp");
} }
}, 1000); }, 1000);
}, },
onAnimateEnd(index){ onAnimateEnd(index) {
this.$set(this.isAnimate, index, false); this.$set(this.isAnimate, index, false);
}, },
isTimeUnitShow(index){ isTimeUnitShow(index) {
if(this.arr.includes(index)){ console.log("this.arr是什么：", this.arr);
if(index === this.timeArray.length - 1 && !this.timeUnit[3]){ if (this.arr.includes(index)) {
if (index === this.timeArray.length - 1 && !this.timeUnit[3]) {
return false; return false;
} }
return true; return true;
} }
return false; return false;
}, },
setTimeUnit(index){ setTimeUnit(index) {
switch(index){ switch (index) {
case this.timeArray.length - 1 : return this.timeUnit[3] || ''; // 秒 case this.timeArray.length - 1:
case this.timeArray.length - this.step - 1: return this.timeUnit[2] || ''; // 分 return this.timeUnit[3] || ""; // 秒
case this.timeArray.length - this.step * 2 -1: return this.timeUnit[1] || ''; // 时 case this.timeArray.length - this.step - 1:
default: return this.timeUnit[0] || ''; // 天 return this.timeUnit[2] || ""; // 分
case this.timeArray.length - this.step * 2 - 1:
return this.timeUnit[1] || ""; // 时
default:
return this.timeUnit[0] || ""; // 天
} }
} }
}, }
}; };
</script> </script>
@ -178,20 +221,20 @@ export default {
transform: rotateX(0); transform: rotateX(0);
} }
} }
&.theme2{ &.theme2 {
.time-box{ .time-box {
min-width: 21px; min-width: 21px;
& + .time-box { & + .time-box {
margin-left: 1px; margin-left: 1px;
} }
} }
} }
.time-unit{ .time-unit {
padding: 0 4px; padding: 0 4px;
color: #222; color: #222;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
} }
.time-box { .time-box {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -206,7 +249,7 @@ export default {
border-radius: 3px; border-radius: 3px;
padding: 0 2px; padding: 0 2px;
&:before { &:before {
content: ''; content: "";
position: absolute; position: absolute;
background: #a7c7ff; background: #a7c7ff;
width: 2px; width: 2px;
@ -216,7 +259,7 @@ export default {
margin-top: -3px; margin-top: -3px;
} }
&:after { &:after {
content: ''; content: "";
position: absolute; position: absolute;
background: #a7c7ff; background: #a7c7ff;
width: 2px; width: 2px;