Show/Hide Content Based On A Given Time Range – Timed-Content

Description:

An easy-to-use component for timed content that enables you to show & hide web content based on a given time range.

How to use it:

1. Import the Timed-Content component.

import TimedContent from “vue-timed-content”;

2. Register the component.

export default {
  name: "App",
  components: {
    TimedContent
  },
  // ...
};

3. Add the timed content to your app and determine the start & end dates as follows:

<timed-content :from="from" :to="to">
  <p>This content can only be shown
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>Secrect content</p>
</timed-content>

export default {
  name: "App",
  components: {
    TimedContent
  },
  data() {
    return {
      from: "2019-01-14 01:23:11",
      to: "2020-12-25 14:12:11"
    };
  }
};

4. Timezone is supported as well.

<timed-content :from="from" :to="to" timezone="America/Santo_Domingo">
  <p>This content can only be shown
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>Secrect content</p>
</timed-content>

5. Events.

• @show: When content is visible
• @hide: When content is hidden

Preview:

Download Details:

Author: DannyFeliz

Live Demo: https://codesandbox.io/s/vue-timed-content-demo-k3b5c?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

Download Link: https://github.com/DannyFeliz/vue-timed-content/archive/master.zip

Official Website: https://github.com/DannyFeliz/vue-timed-content

Install & Download:

# NPM
$ npm i vue-timed-content --save

You Might Be Interested In: