/vue-timed-content

Display or hide a content given an range of time

Primary LanguageVue

vue-timed-content

Shows or hides a content based on a given time range

Demo

Edit Vue Timed Content Demo

Props

Prop Description Type Required Default
from Initial date Date true
to End date Date true
time-zone Timezone used to calculate if the dates are in range String false Your local timezone

Events

Event Description
show When content goes from being hidden to visible
hide When content goes from being visible to hidden

Usage

<template>
  <div>
    <p>If you don't see anything it's because you are not in the range to be able view the content</p>
    <timed-content
      :from="new Date('2020/04/01 00:00:00')"
      :to="new Date('2020/04/01 23:59:59')"
      time-zone="America/Santo_Domingo"
    >
      <p>Some April Fools' Day joke 🃏</p>
    </timed-content>
  </div>
</template>

<script>
import TimedContent from "vue-timed-content";

export default {
  components: {
    TimedContent
  }
};
</script>

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.