Timeline 时间线

通常用于某个事物完成节点，进度流程等。

基本使用

查看代码

<template>
	<demo-container>
		<gov-timeline>
			<gov-timeline-item
				v-for="(line, index) in timelines"
				:key="index"
				:timestamp="line.timestamp"
			>
				{{ line.content }}
			</gov-timeline-item>
		</gov-timeline>
	</demo-container>
</template>

<script setup>
const timelines = [
	{
		content: "项目开始阶段",
		timestamp: "2024-04-15",
	},
	{
		content: "项目第二阶段",
		timestamp: "2024-04-13",
	},
	{
		content: "项目完成阶段",
		timestamp: "2024-04-11",
	},
];
</script>

节点控制

控制节点的图标显示。

查看代码

<template>
	<demo-container>
		<gov-timeline>
			<gov-timeline-item
				v-for="(line, index) in timelines"
				:key="index"
				:icon="line.icon"
				:type="line.type"
				:color="line.color"
				:size="line.size"
				:hollow="line.hollow"
				:timestamp="line.timestamp"
			>
				{{ line.content }}
			</gov-timeline-item>
		</gov-timeline>
	</demo-container>
</template>

<script setup>
const timelines = [
	{
		content: "自定义 icon",
		timestamp: "2024-04-12 20:46",
		size: "large",
		type: "primary",
		icon: "s-promotion",
	},
	{
		content: "自定义 color",
		timestamp: "2024-04-03 20:46",
		color: "#0bbd87",
	},
	{
		content: "自定义 size",
		timestamp: "2024-04-03 20:46",
		size: "large",
		hollow: true,
	},
	{
		content: "自定义是否空心 hollow",
		timestamp: "2024-04-03 20:46",
		type: "primary",
		hollow: true,
	},
	{
		content: "默认样式",
		timestamp: "2024-04-03 20:46",
	},
];
</script>

自定义节点

自定义节点显示的内容。

查看代码

<template>
	<demo-container>
		<gov-timeline>
			<gov-timeline-item center timestamp="唐/公元745年" placement="top">
				<div class="demo-timesline__card">
					<div class="demo-timesline__card-title">赠李白</div>
					<div>作者：杜甫</div>
					<div>
						秋来相顾尚飘蓬， 未就丹砂愧葛洪。<br />
						痛饮狂歌空度日， 飞扬跋扈为谁雄。
					</div>
				</div>
			</gov-timeline-item>
			<gov-timeline-item center timestamp="南宋" placement="top">
				<div class="demo-timesline__card">
					<div class="demo-timesline__card-title">古人学问无遗力</div>
					<div>作者：陆游</div>
					<div>
						古人学问无遗力，少壮工夫老始成。<br />
						纸上得来终觉浅，绝知此事要躬行。
					</div>
				</div>
			</gov-timeline-item>
			<gov-timeline-item center timestamp="唐代" placement="top">
				<div class="demo-timesline__card">
					<div class="demo-timesline__card-title">出塞</div>
					<div>作者：王昌龄</div>
					<div>
						秦时明月汉时关，万里长征人未还。<br />
						但使龙城飞将在，不教胡马度阴山。
					</div>
				</div>
			</gov-timeline-item>
			<gov-timeline-item timestamp="唐代" placement="top">
				<div class="demo-timesline__card">
					<div class="demo-timesline__card-title">枫桥夜泊</div>
					<div>作者：张继</div>
					<div>
						月落乌啼霜满天，江枫渔火对愁眠。<br />
						姑苏城外寒山寺，夜半钟声到客船。
					</div>
				</div>
			</gov-timeline-item>
		</gov-timeline>
	</demo-container>
</template>

<style lang="scss">
.demo-timesline__card {
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #f1f1f1;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
	font-size: 14px;
	&-title {
		font-size: 16px;
	}
}
</style>

TimelineItem Attributes

属性名	说明	类型	可选值	默认值
timestamp	时间戳内容	String	—	""
hideTimestamp	是否隐藏时间戳	Boolean	true, false	false
placement	内容和时间戳的位置	String	"top", "bottom"	"bottom"
type	圆点颜色类型	String	"default", "primary", "success", "info", "warning", "danger"	"default"
color	圆点颜色（背景色）	String	—	""
size	圆点大小	String	—	—
icon	图标名称	String	—	—
hollow	是否空心	Boolean	true, false	false

TimelineItem Slots

插槽名	说明	作用域插槽	内容
default	默认插槽，用于插入内容	否	—
dot	自定义圆点内容	否	—