突出展示某个或某组数字、带描述的统计类数据。
基本使用
当需要突出某个或某组数字或展示带描述的统计类数据时使用。
通过 title、extra 属性可以设置数值的描述文字。
html
<iui-statistic title="Download" :value="125670" separator> </iui-statistic>
<iui-statistic extra="Comment" :value="40509" :precision="2"></iui-statistic><iui-statistic title="Download" :value="125670" separator> </iui-statistic>
<iui-statistic extra="Comment" :value="40509" :precision="2"></iui-statistic>自定义前后缀
通过 prefix 和 suffix 插槽可以添加前后缀。
html
<!-- 后缀 -->
<iui-statistic title="New User" :value="125670" separator>
<template #suffix>
<iui-icon name="arrowup" style="font-weight: 600"></iui-icon>
</template>
</iui-statistic>
<!-- 前缀 -->
<iui-statistic
title="User Growth Rate"
:value="50.52"
:precision="2"
:valueStyle="{ color: '#00B42A' }"
>
<template #prefix>
<iui-icon name="arrowup" style="font-weight: 600"></iui-icon>
</template>
<template #suffix> % </template>
</iui-statistic><!-- 后缀 -->
<iui-statistic title="New User" :value="125670" separator>
<template #suffix>
<iui-icon name="arrowup" style="font-weight: 600"></iui-icon>
</template>
</iui-statistic>
<!-- 前缀 -->
<iui-statistic
title="User Growth Rate"
:value="50.52"
:precision="2"
:valueStyle="{ color: '#00B42A' }"
>
<template #prefix>
<iui-icon name="arrowup" style="font-weight: 600"></iui-icon>
</template>
<template #suffix> % </template>
</iui-statistic>API
<Statistic>props<Statistic>slots