找了很多参考教程都没实现自己想要的需求，终于自己修改了一下还算满足，直接上结果。 请注意我这里使用的技术栈是Vue3+Vite+TypeScript
※ 需求实现效果图
<script lang="ts" setup>
const activities = [
{
content: 'Event start',
timestamp: '2018-04-15',
},
{
content: 'Approved',
timestamp: '2018-04-13',
},
{
content: 'Success',
timestamp: '2018-04-11',
},
]
</script>
<template>
<el-timeline class="timeline">
<!-- 循环判断索引的奇偶区分开左右 -->
<el-timeline-item v-for="(activity, index) in activities" :key="index"
:class="index % 2 === 0 ? 'timeline-left' : 'timeline-right'" :timestamp="activity.timestamp" placement="top">
<el-card>
<h4>{{ activity.timestamp }}</h4>
<p>{{ activity.content }}</p>
</el-card>
</el-timeline-item>
</el-timeline>
</template>
<style scoped>
/* `el-timeline`的容器`padding` */
.timeline {
padding: 50px;
}
/* 右侧`el-timeline-item`的样式，将原始时间轴组件整体移动到右半侧 */
.timeline-right {
left: 50%;
width: 50%;
}
/* 左侧`el-timeline-item`的样式，同上，仅是为了方便下面的CSS样式修改 */
.timeline-left {
left: 50%;
width: 50%;
}
/* 针对左侧内容修改样式，注意这里使用的scss */
.timeline-left :deep(.el-timeline-item__wrapper) {
right: 100%;
padding: 0 19px 0 0;
text-align: right;
}
</style>
※ 注意事项
注意这里使用的是v-deep
原因新的vue3.0 单文件规范::v-deep写法已经被废弃了修改成 如下写法，不要加空格
<!-- 报错 -->
<style lang="scss" scoped>
::v-deep .demo{
background: yellow;
}
</style>
<!-- 正确 -->
<style lang="scss" scoped>
:deep(.demo){
background: yellow;
}
</style>
※ ChatGPT插曲
虽然给的代码不适用，但至少思路是正确的。
※ 关于Vuetify
Vuetify提供了交互式非常不错的时间轴组件，可以满足很多功能需求。
但是，此次我使用的是Vue3+Vite工具。
目前（2023.2.27）Vuetify 3.0还在测试阶段，不能很好地适配Vue3；而使用Vite引入Vuetify2.0又需要进行很多配置。
