介绍
本文档主要用于描述 ShadcnCountDown 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" :dark="darkMode" />
</template>简洁 (simple)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" simple :dark="darkMode" />
</template>标题 (title)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" title="Count Down" :dark="darkMode" />
</template>工具栏 (toolbar)
查看代码
vue
<template>
<ShadcnCountDown title="Count Down" toolbar :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" :dark="darkMode" />
</template>预警阈值 (warning-threshold)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)" warning-threshold="2" :dark="darkMode" />
</template>显示进度 (show-progress)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 20 * 1000)" show-progress :dark="darkMode" />
</template>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<ShadcnCountDown :time="new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)" glass :dark="isDark" title="倒计时" :show-progress="true" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
</script>自定义 (slots)
查看代码
vue
<template>
<div class="space-y-2">
<ShadcnCard title="Custom Time Block" :dark="darkMode">
<ShadcnCountDown title="Activity events" :time="new Date(Date.now() + 6 * 1000)" :dark="darkMode">
<template #days="{ value, isWarning }">
<div class="flex flex-col items-center">
<div class="text-5xl font-bold" :class="{ 'text-red-500': isWarning }">
{{ value }}
</div>
<div class="text-sm">Days Left</div>
</div>
</template>
</ShadcnCountDown>
</ShadcnCard>
<ShadcnCard title="Custom Label" :dark="darkMode">
<ShadcnCountDown title="Activity events" :time="new Date(Date.now() + 6 * 1000)" :dark="darkMode">
<template #days-label>
<span class="text-sm mt-2 text-blue-500">DAYS</span>
</template>
</ShadcnCountDown>
</ShadcnCard>
<ShadcnCard title="Custom Full" :dark="darkMode">
<ShadcnCountDown :time="new Date(Date.now() + 6 * 1000)" :dark="darkMode">
<template #blocks="{ timeLeft, isWarning }">
<div class="flex flex-col gap-2">
<div class="text-2xl" :class="{ 'text-red-500': isWarning }">
Time Left: {{ timeLeft.days }} D
</div>
<div class="flex gap-2">
<span>{{ timeLeft.hours }} H</span>
<span>{{ timeLeft.minutes }} M</span>
<span>{{ timeLeft.seconds }} S</span>
</div>
</div>
</template>
</ShadcnCountDown>
</ShadcnCard>
</div>
</template>