TimelineListCard 时间轴卡片

TimelineListCard 时间轴卡片 的基础用法、公开 API 与示例。

基础示例

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

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

const demoProps = { title: "动态", list: [{ time: "09:00", status: "primary", content: "创建报价单" }, { time: "11:30", status: "success", content: "完成审核" }] };
</script>

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

隐藏源代码

引入方式

import { TimelineListCard } from "@/components/card/timeline-list-card";

Props

参数	说明	类型	默认值	必填
list	时间轴列表数据	TimelineItem[]	-	是
title	标题	string	""	否
subtitle	副标题	string	""	否
maxCount	最大显示数量	number	5	否
timelineItemProps	ElTimelineItem Props	Partial<TimelineItemProps>	{}	否

Events

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

Slots

插槽名	说明	参数
default	默认内容插槽。	-

Expose

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

Module API

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

Types

TimelineProps

时间轴列表卡片属性。

字段	说明	类型	默认值	必填
list	时间轴列表数据	TimelineItem[]	-	是
title	标题	string	-	否
subtitle	副标题	string	-	否
maxCount	最大显示数量	number	-	否
timelineItemProps	ElTimelineItem Props	Partial<TimelineItemProps>	-	否

TimelineItem

时间轴列表卡片条目。

字段	说明	类型	默认值	必填
time	时间	string	-	是
status	状态颜色	string	-	是
content	内容	string	-	是
code	代码标识	string	-	否

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