DataListCard 数据列表卡片

DataListCard 数据列表卡片 的基础用法、公开 API 与示例。

基础示例

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

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

const demoProps = { title: "待办事项", list: [{ title: "报价审核", status: "待处理", time: "09:30" }, { title: "材料同步", status: "已完成", time: "10:20" }] };
</script>

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

隐藏源代码

引入方式

import { DataListCard } from "@/components/card/data-list-card";

Props

参数	说明	类型	默认值	必填
list	数据列表	Activity[]	-	是
title	标题	string	-	是
subtitle	副标题	string	""	否
maxCount	最大显示数量	number	5	否
showMoreButton	是否显示更多按钮	boolean	false	否
mode	展示模式：list=上下(默认)、label-value=左右、auto=自动	"list" | "label-value" | "auto"	"list"	否

Events

事件名	说明	回调参数
more	点击查看更多事件。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

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

Module API

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

Types

DataListCardProps

数据列表卡片属性。

字段	说明	类型	默认值	必填
list	数据列表	Activity[]	-	是
title	标题	string	-	是
subtitle	副标题	string	-	否
maxCount	最大显示数量	number	-	否
showMoreButton	是否显示更多按钮	boolean	-	否
mode	展示模式：list=上下(默认)、label-value=左右、auto=自动	"list" | "label-value" | "auto"	-	否

Activity

数据列表卡片条目。

字段	说明	类型	默认值	必填
title	标题	string	-	是
status	状态	string	-	是
time	时间	string	-	否
class	样式类名	string	-	否
icon	图标	string	-	否
valueColor	单列值颜色（CSS color 值），优先于全局	string	-	否
valueSize	单列值字号，number 表示 px，也可以传字符串如 '1.2rem'	number | string	-	否

DataListCardEmits

数据列表卡片事件。

字段	说明	类型	默认值	必填
more	点击查看更多事件。	[]	-	是

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