Wondering what’s next for npm?Check out our public roadmap! »

vue2-flip-countdown

0.11.1 • Public • Published

vue2-flip-countdown

npm version tested with jest

A simple flip countdown timer component for Vue 2.x

screenshot

Demo

Installation

npm i vue2-flip-countdown --save

Running Demo on Local Machine

cd demo
npm i
npm run serve

Then open http://localhost:8080 on a browser.

Usage

<template>
  <div>
    <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
  </div>
</template>
 
<script>
  import FlipCountdown from 'vue2-flip-countdown'
 
  export default {
    components: { FlipCountdown }
  }
</script>
  • If you want to remove days section, set showDays prop to false (available since v0.10.0)

  • If you want to remove hours/minutes/seconds section, set showHours/showMinutes/showSeconds prop to false (available since v0.11.0)

    <flip-countdown deadline="2018-12-25 00:00:00" :showDays="false"></flip-countdown>
  • To notify if timer has elapsed, bind a handler to timeElapsed event emitted by component

    <flip-countdown deadline="2018-12-25 00:00:00" @timeElapsed="timeElapsedHandler"></flip-countdown>

Please refer to /demo directory for examples.

If you're using Nuxt.js, use <no-ssr> to avoid server-side rendering. (You will get error if you don't use <no-ssr>)

<template>
  <div>
    <no-ssr>
      <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
    </no-ssr>
  </div>
</template>

References

Install

npm i vue2-flip-countdown

DownloadsWeekly Downloads

1,283

Version

0.11.1

License

MIT

Unpacked Size

51.5 kB

Total Files

13

Last publish

Collaborators

  • avatar