Statistic 统计数值
展示关键业务统计指标或数字量化信息。底层采用原生 Intl.NumberFormat 与高精度分段算法，支持超大安全整数及浮点数安全格式化，杜绝数字截断与失真。
预览
Preview
活跃用户
112,893上升
月度成交额
¥938,204.50
系统故障率
0.0012下降%
安装
pnpm dlx brutx-vue@latest add statistic用法
vue
<script setup>
import { Statistic } from 'brutx-ui-vue'
</script>
<template>
<!-- 基础用法 -->
<Statistic title="总用户数" :value="128940" />
<!-- 货币与精度定制 -->
<Statistic title="成交金额" :value="98234.5" prefix="¥" :precision="2" />
<!-- 趋势状态与卡片变体 -->
<Statistic
title="转化率"
:value="12.4"
suffix="%"
trend="up"
variant="card"
/>
</template>超大数值与高精度
支持直接传入超出 JavaScript 安全整数范围的字符串数值或 BigInt，保持原始精度不失真：
vue
<template>
<Statistic title="代币总量" value="900719925474099200000000" />
<Statistic title="质押总量" :value="123456789012345678901234567890n" />
</template>自定义千分位与小数分隔符
vue
<template>
<Statistic
title="欧洲格式"
:value="1234567.89"
group-separator="."
decimal-separator=","
:precision="2"
/>
</template>变体
| 变体 | 说明 |
|---|---|
default | 默认变体，轻量内联布局，无额外边框背景 |
card | 粗野主义卡片，3px 黑色硬边框、硬阴影、内边距与圆角 |
bordered | 粗黑硬边框卡片，无投影 |
subtle | 强调底色背景卡片，带粗黑边框与硬阴影 |
vue
<template>
<Statistic title="Default" :value="1200" variant="default" />
<Statistic title="Card" :value="1200" variant="card" />
<Statistic title="Bordered" :value="1200" variant="bordered" />
<Statistic title="Subtle" :value="1200" variant="subtle" />
</template>尺寸
| 尺寸 | 标题字号 | 数值字号 | 趋势字号 |
|---|---|---|---|
sm | text-xs | text-2xl | text-xs |
default | text-sm | text-3xl sm:text-4xl | text-sm |
lg | text-base | text-4xl sm:text-5xl | text-base |
vue
<template>
<Statistic title="小型" :value="88" size="sm" variant="card" />
<Statistic title="标准" :value="88" size="default" variant="card" />
<Statistic title="大型" :value="88" size="lg" variant="card" />
</template>导出类型
组件导出了变体样式函数与 TypeScript 类型定义，方便二次封装：
ts
import type {
StatisticProps,
StatisticValue,
StatisticVariantProps,
StatisticContentVariantProps,
} from 'brutx-ui-vue'
import {
statisticVariants,
statisticTitleVariants,
statisticContentVariants,
statisticValueVariants,
statisticTrendVariants,
} from 'brutx-ui-vue'API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value可空 | StatisticValue | undefined | 要格式化并展示的数值，支持 number、string、bigint 以及空值。 |
详情声明类型StatisticValue 字面量
关联类型 StatisticValue 类型定义 — StatisticValueexport type StatisticValue = number | string | bigint | null | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
title | string | undefined | undefined | 统计数值上方显示的标题文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
prefix | string | undefined | undefined | 显示在格式化数值之前的文本，例如货币符号。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
suffix | string | undefined | undefined | 显示在格式化数值之后的文本，例如百分号或单位。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
precision | number | undefined | undefined | 指定格式化结果保留的小数位数。 |
详情声明类型number | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
decimalSeparator | string | undefined | undefined | 覆盖格式化数值中的小数分隔符。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
groupSeparator | string | undefined | undefined | 覆盖格式化数值中的千位分组分隔符。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
formatter | ((value: StatisticValue) => string) | undefined | undefined | 自定义数值转文本函数；返回的字符串作为格式化结果展示。 |
详情声明类型((value: StatisticValue) => string) | undefined 关联类型 StatisticValue 类型定义 — StatisticValueexport type StatisticValue = number | string | bigint | null | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
placeholder | string | undefined | undefined | value 为空或无法格式化时展示的占位文本。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
trend | "up" | "down" | undefined | undefined | 展示上升或下降趋势标记，并使用相应的状态色。 |
详情声明类型"up" | "down" | undefined 字面量
默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
trendPlacement | "start" | "end" | undefined | "end" | 将趋势标记放在数值内容的前侧或后侧。 |
详情声明类型"start" | "end" | undefined 字面量
默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
variant | "bordered" | "card" | "default" | "subtle" | undefined | "default" | 设置统计容器的默认、卡片、边框或柔和视觉样式。 |
详情声明类型NonNullable<"default" | "card" | "bordered" | "subtle" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
size | "default" | "lg" | "sm" | undefined | "default" | 设置统计内容的默认、小或大尺寸。 |
详情声明类型NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined 字面量
默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
locale | string | undefined | undefined | 指定本地化数值格式化所用的区域设置。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
class | string | undefined | undefined | 追加到统计根容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/statistic/types.ts | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#title | { title?: string | undefined; } | 替换标题区域内容；作用域提供当前 title。 |
详情声明类型{ title?: string | undefined; }来源packages/ui/src/components/statistic/Statistic.vue | ||
#prefix | { prefix?: string | undefined; } | 替换数值前缀区域内容；作用域提供当前 prefix。 |
详情声明类型{ prefix?: string | undefined; }来源packages/ui/src/components/statistic/Statistic.vue | ||
#suffix | { suffix?: string | undefined; } | 替换数值后缀区域内容；作用域提供当前 suffix。 |
详情声明类型{ suffix?: string | undefined; }来源packages/ui/src/components/statistic/Statistic.vue | ||
#trend | { trend: "up" | "down"; label: string; } | 替换趋势指示内容；作用域提供趋势方向和本地化标签。 |
详情声明类型{ trend: "up" | "down"; label: string; }来源packages/ui/src/components/statistic/Statistic.vue | ||
#default | { value: StatisticValue; formattedValue: string; } | 替换格式化数值内容；作用域提供原始 value 与 formattedValue。 |
详情声明类型{ value: StatisticValue; formattedValue: string; }关联类型 StatisticValue 类型定义 — StatisticValueexport type StatisticValue = number | string | bigint | null | undefined 来源packages/ui/src/components/statistic/Statistic.vue | ||
可访问性
- 键盘操作：组件属于纯展示类数据排版元素，默认不接收键盘焦点；若内部插槽嵌入可聚焦按钮或链接，遵循自然 Tab 导航顺序。
- ARIA 属性：数值内容使用语义化结构标签渲染；趋势指示图标自带
aria-label="上升"或aria-label="下降"，满足色彩独立感知标准。 - 焦点管理：静态排版结构，无焦点陷阱，不干预读屏器线性文本流。
- 动效降级：纯静态文本呈现，无突变眩晕动画，原生兼容系统级减弱动效偏好。