0.1.3 • Published 4 years ago

vue-time-ticker v0.1.3

Weekly downloads
4
License
ISC
Repository
github
Last release
4 years ago

vue-time-ticker

This component provides functionality to display realtime second by second update of the time difference between passed time and the current time. All mounted components will use the single scheduler, so all repaint will be smooth enough. The scheduler is lazy, so if you have no mounted components, you will have zero timeouts.

Preview

vue-time-ticker-demo.gif

Setup

yarn add vue-time-ticker

or using npm

npm install vue-time-ticker

Usage

<template>
  <div>
    <vue-time-ticker :value="formattedValue" format="HOURS" />
  </div>
</template>

<script>
import VueTimeTicker from 'vue-time-ticker';

export default {
  name: 'Counter',
  components: { VueTimeTicker },
  computed: {
    formattedValue() {
      // any source of data for your component
      return this.value;
    },
  },
};
</script>

Props descriptions

Prop nameTypeExample valuesDescription
valueString2020-03-20T00:00:00zShould be valid format for default JavaScript new Date() constructor
formatStringOne of: HOURS,MINUTES,SECONDSRepresents format of displaying the result, HOURS: 00:00:00, MINUTES: 00:00,SECONDS: 00