根据给定的时间范围显示/隐藏内容 - vue-timed-content

根据给定的时间范围显示/隐藏内容 - vue-timed-content
插件名称 vue-timed-content
发布时间 2020年12月2日
插件作者 DannyFeliz

定时内容的易于使用的组件,使您可以根据给定的时间范围显示和隐藏Web内容。

安装和下载:

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

如何使用它:

1.导入“定时内容”组件

从“ vue-timed-content”中导入TimedContent;

2.注册组件

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

3.将定时内容添加到您的应用中,并确定开始和结束日期,如下所示:

<timed-content :from="from" :to="to">
  <p>此内容只能显示
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>秘密内容</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.时区也受支持

<timed-content :from="from" :to="to" timezone="America/Santo_Domingo">
  <p>此内容只能显示
    <br>
    between {{ from }} and {{ to }}
  </p>
  <p>秘密内容</p>
</timed-content>

5.事件

  • @show:  可见内容时
  • @hide:  隐藏内容时