Statistic 统计数值

LhStatistic 用于展示统计数值，支持精度、千位分隔与前缀后缀。

基础用法

标题 + 数值

年访问量

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="年访问量" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="年访问量" :value="2384712" />
</template>

精度与分隔符

precision 控制小数位，separator 控制千位分隔（空串关闭分组）

评分

4.85

编号

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="评分" :value="4.8471" :precision="2" />
    <LhStatistic title="编号" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="评分" :value="4.8471" :precision="2" />
    <LhStatistic title="编号" :value="8899001" separator="" />
  </div>
</template>

前缀与后缀

prefix / suffix 或同名插槽

成交额

¥128,600元

增长率

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="成交额" :value="128600" prefix="¥" suffix="元" />
    <LhStatistic title="增长率" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="成交额" :value="128600" prefix="¥" suffix="元" />
    <LhStatistic title="增长率" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

非数值文本

value 传入无法解析的字符串时按原文展示，可用于超大数或特殊文案。

字符串 value

星辰

不可计数

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="星辰" value="不可计数" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="星辰" value="不可计数" />
</template>

API

Props

属性	说明	类型	默认值
title	数值标题	string	—
value	统计数值；字符串形式可承载超大数或带符号文本	string | number	0
precision	小数精度	number	0
separator	千位分隔符；空串关闭分组	string	','
prefix	数值前缀，如货币符号	string	—
suffix	数值后缀，如单位	string	—
sx	sx 快速布局属性	LhSxProps	—

Slots

插槽名	说明
title	自定义标题
prefix	自定义前缀
suffix	自定义后缀

无障碍

• 数值区带 aria-live="polite"，value 变化时屏幕阅读器温和播报新值
• 标题、前缀、后缀均为普通文本，可直接读取

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/statistic/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhStatisticProps

export interface LhStatisticProps {
  /** 数值标题（展示在数值上方） */
  title?: string
  /** 统计数值；字符串形式可承载超大数或带符号文本 */
  value: number | string
  /** 小数精度 */
  precision?: number
  /** 千位分隔符；空串关闭分组 */
  separator?: string
  /** 数值前缀，如货币符号 */
  prefix?: string
  /** 数值后缀，如单位 */
  suffix?: string
  /** sx 快速布局属性 */
  sx?: LhSxProps
}