Example

vue-countdown

Simple Countdown component for Vue.js.

• Example

Project setup

In browser:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-countdown.js"></script>
<script>Vue.component(VueCountdown.name, VueCountdown);</script>

Usage

import Vue from 'vue'
import VueCountdown from '@hebertsilva/vue-countdown'
Vue.component(VueCountdown.name, VueCountdown)

<countdown :time="20" :onComplete="setFunctionOnComplete" :labels="['Days', 'Hours', 'Minutes', 'Seconds']" />
<!-- 
    <ol>
        <li>
            <span class="time">00</span>
            <span class="label">Days</span>
        </li>
        <li>
            <span class="time">21</span>
            <span class="label">Horus</span>
        </li>
        <li>
            <span class="time">19</span>
            <span class="label">Minutes</span>
        </li>
        <li>
            <span class="time">47</span>
            <span class="label">Seconds</span>
        </li>
    </ol>
 -->

Props

time

• Type: Number // Minutes
• Default: 0

labels

• Type: Array
• Default: ['Days', 'Hours', 'Minutes', 'Seconds']

onComplete

• Type: Function
• Default: null

License

MIT © Hebert Silva