mirror of
https://github.com/javaLuo/vue-flip-down.git
synced 2025-04-05 19:41:54 +08:00
1.0.4 处理了一下初始化时的状态
This commit is contained in:
L
parent
1a1e556e22
commit
6145c56fdd
2
dist/main.js
vendored
2
dist/main.js
vendored
File diff suppressed because one or more lines are too long
@ -2,8 +2,8 @@
|
||||
<div>
|
||||
<CountDown :endDate="endDate"
|
||||
:type="type"
|
||||
:theme="21"
|
||||
|
||||
:theme="2"
|
||||
:timeUnit="['天','时','分','秒']"
|
||||
@timeUp="onTimeUp" />
|
||||
|
||||
<hr />
|
||||
@ -12,24 +12,24 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CountDown from '../../dist/main.js';
|
||||
import CountDown from "../../dist/main.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 4,
|
||||
endDate: new Date().getTime() + 30000,
|
||||
type: 2,
|
||||
endDate: new Date().getTime() + 30000
|
||||
};
|
||||
},
|
||||
components: {
|
||||
CountDown,
|
||||
CountDown
|
||||
},
|
||||
methods: {
|
||||
onTypeChange(t) {
|
||||
this.type = t;
|
||||
},
|
||||
onTimeUp() {
|
||||
console.log('时间到了');
|
||||
},
|
||||
},
|
||||
console.log("时间到了");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-flip-down",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"description": "vue 翻页效果的倒计时组件",
|
||||
"main": "dist/main.js",
|
||||
"scripts": {
|
||||
|
||||
151
src/app.vue
151
src/app.vue
@ -2,21 +2,24 @@
|
||||
<template>
|
||||
<div :class="['vue-countdown-component', {'theme2': theme !== 1}]">
|
||||
<template v-for="(item, index) in timeArray">
|
||||
<div :class="['time-box']" :key="index">
|
||||
<div :class="['time-box']"
|
||||
:key="index">
|
||||
{{item}}
|
||||
<div :class="['b0',{'anime': isAnimate[index]}]">
|
||||
<div>{{item}}</div>
|
||||
</div>
|
||||
<div :class="['a0',{'anime': isAnimate[index]}]"
|
||||
@animationend="onAnimateEnd(index)">
|
||||
@animationend="onAnimateEnd(index)">
|
||||
<div>{{timeArrayT[index]}}</div>
|
||||
</div>
|
||||
<div class="a1">
|
||||
<div>{{timeArrayT[index]}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-unit" v-if="isTimeUnitShow(index)">
|
||||
{{setTimeUnit(index)}}
|
||||
<div class="time-unit"
|
||||
:key="`unit-${index}`"
|
||||
v-if="isTimeUnitShow(index)">
|
||||
{{setTimeUnit(index)}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -26,16 +29,25 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeArray: ['00','00','00','00'],
|
||||
timeArrayT: ['00','00','00','00'],
|
||||
isAnimate:[false,false,false,false],
|
||||
timeArray:
|
||||
this.theme === 2
|
||||
? 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: {
|
||||
endDate: { type: [Date, Number, String], default: 0 }, // 截止时间
|
||||
type: { type: [Number, String], default: 4 }, // 时间精度 4/3/2/1
|
||||
theme: {type: [Number, String], default: 1},
|
||||
timeUnit: {type: Array, default: ()=>[]},
|
||||
theme: { type: [Number, String], default: 1 },
|
||||
timeUnit: { type: Array, default: () => [] }
|
||||
},
|
||||
computed: {
|
||||
endTime() {
|
||||
@ -44,28 +56,33 @@ export default {
|
||||
}
|
||||
return Number(this.endDate) > 0 ? Number(this.endDate) : 0;
|
||||
},
|
||||
step(){
|
||||
step() {
|
||||
return this.theme === 1 ? 1 : 2;
|
||||
},
|
||||
arr(){
|
||||
arr() {
|
||||
const length = this.timeArray.length;
|
||||
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;
|
||||
return temp;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeArray(newV,oldV){
|
||||
timeArray(newV, oldV) {
|
||||
const diff = [];
|
||||
newV.forEach((value,index)=>{
|
||||
if(value !== oldV[index]){
|
||||
newV.forEach((value, index) => {
|
||||
if (value !== oldV[index]) {
|
||||
this.$set(this.isAnimate, index, true);
|
||||
diff.push({value,index});
|
||||
diff.push({ value, index });
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
diff.forEach((item)=>{
|
||||
diff.forEach(item => {
|
||||
this.$set(this.timeArrayT, item.index, item.value);
|
||||
});
|
||||
}, 350);
|
||||
@ -74,7 +91,7 @@ export default {
|
||||
if (newV > 0) {
|
||||
this.start(true);
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
@ -112,50 +129,76 @@ export default {
|
||||
}
|
||||
|
||||
let arr = [];
|
||||
if(Number(this.theme) === 1){ // 不分开
|
||||
type>= 4 && arr.push(String(day).padStart(2, '0'));
|
||||
type>= 3 && arr.push(String(hour).padStart(2, '0'));
|
||||
type>= 2 && arr.push(String(min).padStart(2, '0'));
|
||||
arr.push(String(second).padStart(2, '0'));
|
||||
} else { // 分开
|
||||
type>= 4 && 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(''));
|
||||
if (Number(this.theme) === 1) {
|
||||
// 不分开
|
||||
type >= 4 && arr.push(String(day).padStart(2, "0"));
|
||||
type >= 3 && arr.push(String(hour).padStart(2, "0"));
|
||||
type >= 2 && arr.push(String(min).padStart(2, "0"));
|
||||
arr.push(String(second).padStart(2, "0"));
|
||||
} else {
|
||||
// 分开
|
||||
type >= 4 &&
|
||||
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;
|
||||
if(isFirst){
|
||||
this.timeArrayT = [...this.timeArray];
|
||||
this.isAnimate = new Array(this.timeArray.length).fill(false);
|
||||
}
|
||||
if (isFirst) {
|
||||
this.timeArrayT = [...this.timeArray];
|
||||
this.isAnimate = new Array(this.timeArray.length).fill(false);
|
||||
}
|
||||
if (t > 0) {
|
||||
this.start();
|
||||
} else {
|
||||
this.$emit('timeUp');
|
||||
this.$emit("timeUp");
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
onAnimateEnd(index){
|
||||
onAnimateEnd(index) {
|
||||
this.$set(this.isAnimate, index, false);
|
||||
},
|
||||
isTimeUnitShow(index){
|
||||
if(this.arr.includes(index)){
|
||||
if(index === this.timeArray.length - 1 && !this.timeUnit[3]){
|
||||
isTimeUnitShow(index) {
|
||||
console.log("this.arr是什么：", this.arr);
|
||||
if (this.arr.includes(index)) {
|
||||
if (index === this.timeArray.length - 1 && !this.timeUnit[3]) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
setTimeUnit(index){
|
||||
switch(index){
|
||||
case this.timeArray.length - 1 : return this.timeUnit[3] || ''; // 秒
|
||||
case this.timeArray.length - this.step - 1: return this.timeUnit[2] || ''; // 分
|
||||
case this.timeArray.length - this.step * 2 -1: return this.timeUnit[1] || ''; // 时
|
||||
default: return this.timeUnit[0] || ''; // 天
|
||||
setTimeUnit(index) {
|
||||
switch (index) {
|
||||
case this.timeArray.length - 1:
|
||||
return this.timeUnit[3] || ""; // 秒
|
||||
case this.timeArray.length - this.step - 1:
|
||||
return this.timeUnit[2] || ""; // 分
|
||||
case this.timeArray.length - this.step * 2 - 1:
|
||||
return this.timeUnit[1] || ""; // 时
|
||||
default:
|
||||
return this.timeUnit[0] || ""; // 天
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -178,20 +221,20 @@ export default {
|
||||
transform: rotateX(0);
|
||||
}
|
||||
}
|
||||
&.theme2{
|
||||
.time-box{
|
||||
&.theme2 {
|
||||
.time-box {
|
||||
min-width: 21px;
|
||||
& + .time-box {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.time-unit{
|
||||
padding: 0 4px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.time-unit {
|
||||
padding: 0 4px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.time-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@ -206,7 +249,7 @@ export default {
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
&:before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #a7c7ff;
|
||||
width: 2px;
|
||||
@ -216,7 +259,7 @@ export default {
|
||||
margin-top: -3px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #a7c7ff;
|
||||
width: 2px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user