Simple Countdown componente for Vuejs
var dateNow = new Date();
Vue.component('counter', {
template: '<div>'
+ '<template v-if="date > now">'
+ '<div><span>{{ d }}</span><br>dias</div> : '
+ '<div><span>{{ h }}</span><br>horas</div> : '
+ '<div><span>{{ m }}</span><br>minutos</div> : '
+ '<div><span>{{ s }}</span><br>segundos</div>'
+ '</template>'
+ '<p class="counter-closed" v-else>Que pena, essa promoção acabou :(</p>',
props : {
day : {
type: Number,
default: dateNow.getDay()
},
month : {
type: Number,
default: dateNow.getMonth()
},
year : {
type: Number,
default: dateNow.getYear()
},
hour : {
type: Number,
default: 0
},
minute : {
type: Number,
default: 0
},
second : {
type: Number,
default: 0
}
},
data: function () {
return {
date: 0,
now: Math.trunc((new Date()).getTime() / 1000)
}
},
mounted: function () {
var self = this;
var date = new Date(this.year, this.month-1, this.day, this.hour, this.minute, this.second);
this.date = Math.trunc(date.getTime() / 1000);
window.setInterval(function () {
self.now = Math.trunc(new Date().getTime() / 1000);
}, 1000);
},
computed: {
s: function() {
return (this.date - this.now) % 60;
},
m: function() {
return Math.trunc((this.date - this.now) / 60) % 60;
},
h: function() {
return Math.trunc((this.date - this.now) / 60 / 60) % 24;
},
d: function() {
return Math.trunc((this.date - this.now) / 60 / 60 / 24);
}
}
});