element-plus提供的Timeline时间线组件默认是将时间戳标题的展示放在item的上方或下方。同时该组件所提供的API仅仅只有hide-timestamp
这个“是否隐藏时间戳”。但是在需求中需要修改该时间戳的样式,所以就没办法使用提供的API来修改样式。
这里的一个简单解决办法是隐藏组件提供的时间戳,然后自己使用css自定义一个时间戳标题。
<el-timeline :reverse="true">
<el-timeline-item v-for="date in anime_date" type="primary" :hollow="true" :timestamp="date.date_name"
:hide-timestamp="true" placement="top" size="large">
<!-- 自定义时间戳标题 -->
<div class="timestamp">
{{ date.date_name }}
</div>
<!-- 自定义item -->
<DirectoryItem :date="date" />
</el-timeline-item>
</el-timeline>
其中css代码为:
.timestamp {
text-align: left;
margin-bottom: 8px;
padding-top: 4px;
}
所得结果如下图所示: