cagartner
9/28/2017 - 12:52 PM

Simple Countdown componente for Vuejs

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);
                    }
                }
            });