StatsCard 统计卡片

StatsCard 统计卡片 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { StatsCard } from "@/components/card/stats-card";

const demoProps = { title: "材料数量", description: "当前项目", count: 1860, icon: "ep:data-analysis" };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <StatsCard v-bind="demoProps"></StatsCard>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { StatsCard } from "@/components/card/stats-card";

Props

参数	说明	类型	默认值	必填
icon	图标	string	""	否
title	标题	string	""	否
count	数值，默认 0	number	0	否
description	描述	string	""	否
iconColor	图标颜色	string	""	否
iconBgColor	图标背景颜色	string	""	否
iconBgRadius	图标圆角大小，默认 50	string | number	50	否
iconSize	图标大小，默认 30	string | number	30	否
textColor	文本颜色	string	""	否
backgroundColor	背景颜色	string	""	否
showArrow	是否显示箭头	boolean	false	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
title	标题内容插槽。	-
description	description 内容插槽。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
StatsCard	导出 StatsCard 供业务侧复用。	useInstall(index)

Types

StatsCardBaseProps

统计卡片组件实际读取的属性。

字段	说明	类型	默认值	必填
icon	图标	string	-	否
title	标题	string	-	否
count	数值，默认 0	number	-	否
description	描述	string	-	是
iconColor	图标颜色	string	-	否
iconBgColor	图标背景颜色	string	-	否
iconBgRadius	图标圆角大小，默认 50	string | number	-	否
iconSize	图标大小，默认 30	string | number	-	否
textColor	文本颜色	string	-	否
backgroundColor	背景颜色	string	-	否
showArrow	是否显示箭头	boolean	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。