基于Element Plus实现Timeline左右布局

技术栈是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

::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)警告解决

原因新的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又需要进行很多配置。