Skip to content

Flip Number

一个经典的数字或字符翻转动画组件。

安装

bash
npx draft-cli vue add flip-countdown

使用

基础用法

5
5
5
5
vue
<script setup>
import { FlipNumber } from '@draft-ui/vue'
</script>

<template>
  <FlipNumber value="5" class="size-10" />
</template>

示例

倒计时

组合多个 FlipNumber 组件创建倒计时。

01
01
01
01
DAYS
00
00
00
00
HRS
00
00
00
00
MINS
00
00
00
00
SECS

此示例使用 FlipCountdown 组件,它由多个 FlipNumber 组件组成。

API

属性类型默认值描述
valuestring必填要显示的字符或数字。