介绍
本文档主要用于描述 ShadcnCountDown 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" />
</template>简洁 (simple)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" simple />
</template>标题 (title)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)" title="Count Down" />
</template>工具栏 (toolbar)
查看代码
vue
<template>
<ShadcnCountDown title="Count Down" toolbar :time="new Date(Date.now() + 10 * 24 * 60 * 60 * 1000)"/>
</template>预警阈值 (warning-threshold)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)" warning-threshold="2" />
</template>显示进度 (show-progress)
查看代码
vue
<template>
<ShadcnCountDown :time="new Date(Date.now() + 20 * 1000)" show-progress />
</template>自定义 (slots)
查看代码
vue
<template>
<div class="space-y-2">
<ShadcnCard title="Custom Time Block">
<ShadcnCountDown title="Activity events" :time="new Date(Date.now() + 6 * 1000)">
<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">
<ShadcnCountDown title="Activity events" :time="new Date(Date.now() + 6 * 1000)">
<template #days-label>
<span class="text-sm mt-2 text-blue-500">DAYS</span>
</template>
</ShadcnCountDown>
</ShadcnCard>
<ShadcnCard title="Custom Full">
<ShadcnCountDown :time="new Date(Date.now() + 6 * 1000)">
<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>