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

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

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

### Vue3 中 `el-timeline` 组件的使用 在 Vue 3 和 Element Plus (Element UI 的 Vue 3 版本) 下,`el-timeline` 是一个用于展示一系列按时间顺序排列事件的时间线组件。此组件支持多种自定义选项,包括但不限于节点样式、图标设置以及内容区域的内容。 #### 属性说明 - **reverse**: 布尔型,默认为 false;如果设为 true,则会按照相反的方向显示条目。 - **pending**: 布尔型或字符串类型;当作为布尔值传入且为真时,在最后一条记录之后添加一个灰色占位符表示还有更多未加载的数据;也可以传递一段文字描述正在等待的状态[^1]。 #### 方法与事件 - 支持常规 DOM 事件监听器绑定方式,比如点击某个特定项触发相应操作等。 #### 示例代码 下面给出了一段简单的例子来演示如何创建一个基础版本的时间线: ```html <template> <div class="example"> <!-- 时间线容器 --> <el-timeline :reverse="true"> <!-- 单个时间点 --> <el-timeline-item timestamp="2023/9/1" placement="top"> 创建项目结构 </el-timeline-item> <el-timeline-item timestamp="2023/9/5" type="primary" color="#0bbd87"> 完成初步设计稿 </el-timeline-item> <el-timeline-item timestamp="2023/9/10" hide-timestamp> 开始编码工作 </el-timeline-item> <!-- 更多条目... --> <!-- 如果有 pending 参数则会出现最后一个虚线圆圈 --> <el-timeline-item v-if="loadingMore" /> </el-timeline> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const loadingMore = ref(false); // 可在此处模拟异步请求数据逻辑... </script> ``` 上述模板展示了三个不同样式的里程碑时刻,并设置了 reverse 属性让最新的活动位于顶部。此外还包含了隐藏时间戳的例子 (`hide-timestamp`) 以及通过条件渲染实现动态加载更多的效果(`v-if="loadingMore"`)。 除了官方提供的 `el-timeline`, 社区里也有不少优秀的替代方案可供选择, 如 `vue-cute-timeline` 或者 `timeline-vuejs`. 这些库通常具有更丰富的特性集或是更加灵活的设计理念,可以根据实际应用场景和个人喜好挑选合适的工具[^2][^3].
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值