修改element-plus中Timeline时间线的时间戳标题的样式

最新推荐文章于 2025-05-30 09:06:21 发布

kurodasense

最新推荐文章于 2025-05-30 09:06:21 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/kurodasense/article/details/133971284

文章讲述了在Element-Plus的Timeline组件中，由于API限制无法直接修改时间戳样式，作者提供了一种方法，即隐藏官方时间戳并使用CSS自定义显示，展示了如何实现自定义时间戳标题的示例代码和CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

所得结果如下图所示：
在这里插入图片描述