Statistic 统计组件

显示统计数据。

基础用法

用于突出某个或某组数字时,如统计数值、金额、排名等,数值和标题前后都可以加icon、单位等元素。 可以使用 vueuse 实现数值的变化动效

Daily active users
268,500
Ratio of men to women
138
/100
Total Transactions
0
Feedback number
562

倒计时

倒计时组件,支持添加其他组件来控制。

Start to grab
00:00:00
Remaining VIP time
00:00:00
Still to go until next month
00 days 00:00:00

TIP

在格式化过程中,建议在天数范围内

统计卡片

卡片式用法展示,可以自由组合

Daily active users
98,500
Monthly Active Users
693,700
New transactions today
72,000

Statistic API

Statistic Attributes

Attribute描述类型默认值
value数字内容number0
decimal-separator设置小数点符号string.
formatter自定义数字格式化Function
group-separator设置千分位标识符string,
precision数字精度number0
prefix设置数字的前缀string
suffix设置数字的后缀string
title数字标题string
value-style数字样式string / object

Statistic 插槽

插槽名详情
prefix数字区之前
suffix数字区之后
title数字标题

Statistic Exposes

名称描述类型
displayValue当前显示值object

Countdown API

Countdown 属性

属性详情类型默认值
value目标时间number / Dayjs
format格式化倒计时stringHH:mm:ss
prefix设置倒计时前缀string
suffix设置倒计时的后缀string
title倒计时标题string
value-style倒计时值的样式string / object

Countdown 事件

方法描述类型
change时间差改变事件Function
finish倒计时结束事件Function

Countdown 插槽

事件名描述
prefix倒计时值前缀
suffix倒计时后缀
title倒计时标题

Countdown Exposes

名称详情类型
displayValue当前显示值object

源代码

组件样式文档

贡献者