数值显示 Statistic

数值动画

通过 animation 可以开启数值动画。

基本用法

当需要突出某个或某组数字或展示带描述的统计类数据时使用。

倒计时组件

倒计时组件 countdown 的基本使用方法。

自定义前缀&后缀

通过 prefix 和 suffix 插槽可以添加前后缀。

API

<statistic> Props

参数名	描述	类型	默认值	版本
title	数值显示的标题	string	-
value	数值显示的值	number | Date	-
format	数值显示的格式 dayjs（日期模式使用）	string	'HH:mm:ss'
extra	额外的显示内容	string	-
start	是否开始动画	boolean	true
precision	小数保留位数（数字模式使用）	number	0
separator	进位分隔符（数字模式使用）	string	-
show-group-separator	是否展示进位分隔符（数字模式使用）	boolean	false
animation	是否开启动画	boolean	false
animation-duration	动画的过度时间	number	2000
value-from	动画的起始值	number	-
placeholder	提示文字（当 value 为 undefined 时显示）	string	-	2.28.0
value-style	自定义显示值的样式	CSSProperties	-	2.32.0

<statistic> Slots

插槽名	描述	参数
title	标题	-
prefix	前缀	-
suffix	后缀	-
extra	额外内容	-

<countdown> Props

参数名	描述	类型	默认值	版本
title	倒计时的标题	string	-
value	倒计时的值	number	() => Date.now() + 300000
now	用于修正初始化时间显示不正确	number	() => Date.now()
format	倒计时的展示格式 dayjs	string	'HH:mm:ss'
start	是否开始倒计时	boolean	true
value-style	自定义显示值的样式	CSSProperties	-	2.32.0

<countdown> Events

事件名	描述	参数
finish	倒计时完成后触发的回调	-

<countdown> Slots

插槽名	描述	参数
title	标题	-