StatCard 统计卡片

用于展示关键指标和趋势的统计卡片组件。

基础用法

最简单的用法，展示标题和数值。

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
  />
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
</script>

基础的统计卡片，展示标题和数值。

带趋势

显示数据趋势，支持上升和下降两种状态。

<template>
  <a-space direction="vertical" :size="16" style="width: 100%">
    <sb-stat-card
      title="总销售额"
      :value="12345"
      trend="+12.5%"
      trend-type="up"
    />
    
    <sb-stat-card
      title="支付笔数"
      :value="6560"
      trend="-3.1%"
      trend-type="down"
    />
  </a-space>
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
import { Space as ASpace } from 'ant-design-vue';
</script>

通过 trend 和 trend-type 属性显示数据趋势。

带底部信息

使用 footer 插槽添加底部信息。

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
    trend="+12.5%"
    trend-type="up"
  >
    <template #footer>
      <span>日销售额 ¥1,234</span>
    </template>
  </sb-stat-card>
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
</script>

使用 footer 插槽可以添加额外的底部信息。

自定义格式化

使用 formatter 属性自定义数值格式。

<template>
  <sb-stat-card
    title="总销售额"
    :value="12345"
    :formatter="(val) => '¥' + val.toLocaleString()"
    trend="+12.5%"
    trend-type="up"
  />
</template>

<script setup lang="ts">
import { StatCard as SbStatCard } from '@simple-blue/components';
</script>

通过 formatter 属性可以自定义数值的显示格式。

API

Props

参数	说明	类型	默认值
title	卡片标题	string	-
value	数值	string | number	-
trend	趋势文本	string	-
trendType	趋势类型	'up' | 'down'	'up'
icon	图标组件	Component	-
bordered	是否显示边框	boolean	false
hoverable	鼠标悬停时是否显示阴影	boolean	true
formatter	自定义数值格式化函数	(value: string | number) => string	-

Slots

名称	说明
footer	底部内容

类型定义

export interface StatCardProps {
  title: string;
  value: string | number;
  trend?: string;
  trendType?: 'up' | 'down';
  icon?: any;
  bordered?: boolean;
  hoverable?: boolean;
  formatter?: (value: string | number) => string;
}