This package has been deprecated

    Author message:

    No longer maintainted, please use @chenfengyuan/vue-countdown

    @xkeshi/vue-countdown

    1.0.1 • Public • Published

    vue-countdown

    Build Status Downloads Version

    Countdown component for Vue.js.

    Table of contents

    Main

    dist/
    ├── vue-countdown.js        (UMD)
    ├── vue-countdown.min.js    (UMD, compressed)
    ├── vue-countdown.common.js (CommonJS, default)
    └── vue-countdown.esm.js    (ES Module)

    Getting started

    Install

    npm install @xkeshi/vue-countdown vue

    In browser:

    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-countdown.js"></script>

    Usage

    import Vue from 'vue';
    import VueCountdown from '@xkeshi/vue-countdown';
     
    Vue.component(VueCountdown.name, VueCountdown);
    <countdown :time="2 * 24 * 60 * 60 * 1000">
      <template slot-scope="props">Time Remaining:{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
    </countdown>
    <!-- <span>Time Remaining:01 days, 23 hours, 59 minutes, 59 seconds.</span> -->

    In browser:

    <script>Vue.component(VueCountdown.name, VueCountdown);</script> 

    ⬆ back to top

    Props

    auto-start

    • Type: Boolean
    • Default: true

    Starts the countdown automatically, when initialized.

    emit-events

    • Type: Boolean
    • Default: true

    Indicates, if the component should emit the countdown events.

    interval

    • Type: Number
    • Default: 1000

    Updates the interval time (in milliseconds) of the countdown.

    leading-zero

    • Type: Boolean
    • Default: true

    Adds a leading zero to the output of days, hours, minutes and seconds, if they are single-digit.

    now

    • Type: Function
    • Default: () => Date.now()

    Generates the current time (in milliseconds) in a specific time zone.

    time

    • Type: Number
    • Default: 0

    The time (in milliseconds) the component should count down from.

    Note: The value should not be less than 0.

    tag

    • Type: String
    • Default: 'span'

    The tag name of the component's root element.

    Methods

    start

    Start the countdown.

    <countdown :auto-start="false" ref="countdown"></countdown>
    export default {
      mounted() {
        this.$refs.countdown.start();
      },
    };

    pause

    Pause the countdown.

    <countdown ref="countdown"></countdown>
    export default {
      mounted() {
        this.$refs.countdown.pause();
      },
    };

    stop

    Stop the countdown.

    <countdown ref="countdown"></countdown>
    export default {
      mounted() {
        this.$refs.countdown.stop();
      },
    };

    Events

    You have to set the emit-events property to true to be able use these events. If you don't need them, you can set the property to false for better performance.

    countdownstart

    This event fires when the countdown starts.

    countdownpause

    This event fires when the countdown is paused.

    countdownprogress

    This event fires when the countdown is in progress.

    <countdown @countdownprogress="handleCountdownProgress"></countdown>
    export default {
      methods: {
        handleCountdownProgress(data) {
          console.log(data.days);
          console.log(data.hours);
          console.log(data.minutes);
          console.log(data.seconds);
          console.log(data.totalDays);
          console.log(data.totalHours);
          console.log(data.totalMinutes);
          console.log(data.totalSeconds);
        },
      },
    };

    countdownend

    This event fires when the countdown stops.

    ⬆ back to top

    Browser support

    • Chrome (latest)
    • Firefox (latest)
    • Safari (latest)
    • Opera (latest)
    • Edge (latest)
    • Internet Explorer 9+

    Versioning

    Maintained under the Semantic Versioning guidelines.

    License

    MIT © Xkeshi

    ⬆ back to top

    Install

    npm i @xkeshi/vue-countdown

    DownloadsWeekly Downloads

    708

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    44.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • chenfengyuan