Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera
Created May 28, 2018 16:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uno-de-piera/b202e7e6b10c5e67ddcfd3943baa4f76 to your computer and use it in GitHub Desktop.
Save uno-de-piera/b202e7e6b10c5e67ddcfd3943baa4f76 to your computer and use it in GitHub Desktop.
<template>
<div>
<div class="card text-white bg-info mb-3" v-if="seconds">
<div class="card-body">
<h2>{{ countdown }}</h2>
</div>
</div>
</div>
</template>
<script>
import * as moment from 'moment';
export default {
name: 'CountDown',
props: {
seconds: {
type: Number,
required: true,
}
},
data () {
return {
countdown: null,
expires_in: null,
interval: null,
}
},
mounted () {
this.countdown = moment.utc(this.seconds).format('HH:mm:ss');
this.expires_in = this.seconds;
this._setInterval();
},
destroyed () {
clearInterval(this.interval);
},
methods: {
_setInterval: function() {
this.interval = setInterval(() => {
if (this.expires_in === 0) {
clearInterval(this.interval);
} else {
this.expires_in -= 1;
this.countdown = moment.utc(this.expires_in * 1000).subtract(1, 'seconds').format('HH:mm:ss');
}
}, 1000);
},
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment