Open2023/11/21にコメント追加3

指定した期間だけ表示する TimeLimit.vue コンポーネント

TimeLimitコンポーネントは、指定された時間範囲内にのみコンテンツを表示するように設計された、汎用性の高いVue.jsコンポーネントです。このコンポーネントは、期間限定のキャンペーンやイベントの告知、スケジュールされたコンテンツなど、時間の制約に基づいて要素を表示または非表示にする必要があるシナリオで特に役立ちます。

TimeLimit.vue

<script setup lang="ts">
const props = defineProps<{
  startAt?: Date | number;
  endAt?: Date | number;
  now?: Date | number;
}>();

const isBetween = computed(() => {
  const now = props.now ?? Date.now();
  const startAt = props.startAt ?? now;
  const endAt = props.endAt ?? now;
  return now >= startAt && now <= endAt;
});
</script>

<template>
  <slot v-if="isBetween"></slot>
</template>

coedo

使い方

<template>
  <div>
    <TimeLimit :endfAt="new Date(2024, 11, 31, 23, 59, 59)">
      <FooBar />
    </TimeLimit>
  </div>
</template>

coedo