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
}