142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<section class="flex text-xl justify-center content-center">
|
|
<div class="days mr-2 relative"> {{ displayDays}} </div>
|
|
<span class="leading-snug">:</span>
|
|
|
|
<div class="hours mx-2 relative"> {{ displayHours }} </div>
|
|
<span class="leading-snug">:</span>
|
|
|
|
<div class="minutes mx-2 relative"> {{ displayMinutes }} </div>
|
|
<span class="leading-snug">:</span>
|
|
|
|
<div class="seconds ml-2 relative"> {{ displaySeconds }} </div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'akaunting-countdown',
|
|
|
|
props: {
|
|
textDays: {
|
|
type: String,
|
|
default: 'days',
|
|
description: "Modal header title"
|
|
},
|
|
|
|
year: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Modal header title"
|
|
},
|
|
month: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Modal header title"
|
|
},
|
|
date: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Input readonly status"
|
|
},
|
|
hour: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Input disabled status"
|
|
},
|
|
minute: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Input value defalut"
|
|
},
|
|
second: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Input model defalut"
|
|
},
|
|
millisecond: {
|
|
type: Number,
|
|
default: 0,
|
|
description: "Prepend icon (left)"
|
|
}
|
|
},
|
|
|
|
data:() => ({
|
|
displayDays: 0,
|
|
displayHours: 0,
|
|
displayMinutes: 0,
|
|
displaySeconds: 0,
|
|
loaded: false,
|
|
expired: false
|
|
}),
|
|
|
|
computed: {
|
|
_seconds: () => 1000,
|
|
|
|
_minutes() {
|
|
return this._seconds * 60;
|
|
},
|
|
|
|
_hours() {
|
|
return this._minutes * 60;
|
|
},
|
|
|
|
_days() {
|
|
return this._hours * 24;
|
|
},
|
|
|
|
end() {
|
|
return new Date(
|
|
this.year,
|
|
this.month,
|
|
this.date,
|
|
this.hour,
|
|
this.minute,
|
|
this.second,
|
|
this.millisecond
|
|
);
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.showRemainig();
|
|
},
|
|
|
|
methods: {
|
|
formatNum: num =>(num < 10 ? '0' + num : num),
|
|
|
|
showRemainig() {
|
|
const timer = setInterval(() => {
|
|
const now = new Date();
|
|
|
|
const distance = this.end.getTime() - now.getTime();
|
|
|
|
if (distance < 0) {
|
|
clearInterval(timer);
|
|
|
|
this.expired = true;
|
|
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(distance / this._days);
|
|
const hours = Math.floor((distance % this._days) / this._hours);
|
|
const minutes = Math.floor((distance % this._hours) / this._minutes);
|
|
const seconds = Math.floor((distance % this._minutes) / this._seconds);
|
|
|
|
this.displayMinutes = this.formatNum(minutes);
|
|
this.displaySeconds = this.formatNum(seconds);
|
|
this.displayHours = this.formatNum(hours);
|
|
this.displayDays = this.formatNum(days);
|
|
|
|
this.loaded = true;
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|