athiwatp / vue-countdown Goto Github PK

Component that creates countdown based on provided number of seconds or date in future. Install it by running:

npm install @dmaksimovic/vue-countdown --save

Component.vue

<template>
    <div>
        <vue-countdown v-on:time-expire="handleTimeExpire" :seconds="10" :start="start"></vue-countdown>

        <button v-on:click="startTimer">Start timer</button>
    </div>
</template>

<script>
import VueCountdown from '@dmaksimovic/vue-countdown';

export default {
    name: 'my-component',
    data () {
        return {
            start: false
        };
    },
    components: {
        'vue-countdown': VueCountdown
    },
    methods () {
        handleTimeExpire () {
            alert('Time is up!');
        },
        startTimer () {
            this.start = true;
        }
    }
}

</script>

This will create a simple component that will output countdown that starts from 10 and counts until 0.

seconds - number of seconds to start counter from (type number)

date - date in future as a string. Any string that can be parsed by Date.parse() is considered valid. Takes precedence over seconds parameter

message - message to display when counter finishes

units - array that represents units which will form the counter. Possible values are 'hours', 'minutes', 'seconds'

start - boolean value whether to start timer or not

time-expire - triggered when timer finishes

Building

npm run build

Testing

npm test

MIT