在vue3框架中将el-elementplus的Timeline 时间线改成横向布局，并封装成组件

<think>我们已经在之前的回答中给出了一个详细的解决方案。但是为了符合当前问题的要求，我们将再次整理并优化代码，确保封装成一个完整的横向时间线组件。关键点：1.使用ElementPlus的Timeline组件，设置direction为horizontal2.通过CSS样式调整，确保时间线横向排列，并处理连接线等细节3.封装成Vue3组件，提供props和插槽以增强可复用性4.支持点击事件和活动项高亮组件代码（HorizontalTimeline.vue）：</think> 以下是在 Vue3 中将 Element Plus 的 Timeline 时间线组件改造为横向布局并封装成可复用组件的完整解决方案： ### 横向时间线组件封装 ```vue <template> <div class="horizontal-timeline"> <!-- 水平方向的时间线 --> <el-timeline direction="horizontal" :reverse="reverse"> <!-- 遍历时间线项目 --> <el-timeline-item v-for="(item, index) in items" :key="index" :timestamp="item.timestamp" :hollow="hollow" :color="item.color || color" :size="size" :class="{ 'is-active': activeIndex === index }" @click="handleItemClick(index)" > <!-- 提供内容插槽供自定义 --> <slot name="content" :item="item" :index="index"> <!-- 默认内容显示 --> <div class="timeline-content"> <div class="timeline-icon" v-if="item.icon"> <el-icon :size="20"><component :is="item.icon" /></el-icon> </div> <div class="timeline-title">{{ item.title }}</div> <div class="timeline-desc" v-if="item.description"> {{ item.description }} </div> </div> </slot> </el-timeline-item> </el-timeline> </div> </template> <script setup> import { ref, watch } from 'vue'; // 组件属性定义 const props = defineProps({ items: { type: Array, required: true, default: () => [ { title: '事件1', timestamp: '2023-01-01', description: '描述内容1' }, { title: '事件2', timestamp: '2023-02-01', description: '描述内容2' } ] }, reverse: { type: Boolean, default: false }, hollow: { type: Boolean, default: false }, color: { type: String, default: '#0bbd87' // Element Plus 默认颜色 }, size: { type: String, default: 'large', validator: (v) => ['normal', 'large'].includes(v) }, activeIndex: { type: Number, default: 0 } }); // 事件发射 const emit = defineEmits(['item-click', 'update:activeIndex']); // 当前激活索引 const activeIndex = ref(props.activeIndex); // 监听属性变化 watch(() => props.activeIndex, (newVal) => { activeIndex.value = newVal; }); // 处理项目点击 const handleItemClick = (index) => { activeIndex.value = index; emit('update:activeIndex', index); emit('item-click', props.items[index], index); }; </script> <style scoped> .horizontal-timeline { overflow-x: auto; padding: 20px 0; } /* 深度选择器修改 Element 内部样式 */ :deep(.el-timeline) { display: flex; padding: 0; white-space: nowrap; } :deep(.el-timeline-item) { display: inline-flex; flex-direction: column; align-items: center; min-width: 150px; padding: 0 15px; position: relative; flex: 1; } /* 时间戳样式调整 */ :deep(.el-timeline-item__timestamp) { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; font-size: 0.9em; } /* 连接线样式 - 水平 */ :deep(.el-timeline-item__tail) { position: absolute; top: 10px; left: calc(100% - 10px); height: 2px; width: calc(100% - 20px); transform: none; } /* 隐藏最后一个项目的连接线 */ :deep(.el-timeline-item:last-child .el-timeline-item__tail) { display: none; } /* 节点位置调整 */ :deep(.el-timeline-item__node) { position: static; margin: 10px auto; } /* 默认内容样式 */ .timeline-content { text-align: center; padding: 10px; margin-top: 10px; cursor: pointer; transition: all 0.3s; border-radius: 4px; } .timeline-content:hover { background-color: #f5f7fa; } .timeline-icon { margin: 0 auto 8px; } .timeline-title { font-weight: bold; margin-bottom: 4px; } .timeline-desc { font-size: 0.85em; color: #606266; } /* 激活状态样式 */ :deep(.is-active .el-timeline-item__node) { transform: scale(1.2); box-shadow: 0 0 6px rgba(11, 189, 135, 0.4); } :deep(.is-active .timeline-content) { background-color: #ecf5ff; transform: translateY(-3px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* 响应式调整 */ @media (max-width: 768px) { :deep(.el-timeline-item) { min-width: 120px; padding: 0 10px; } .timeline-content { padding: 8px 5px; } } </style> ``` ### 组件使用示例 ```vue <template> <div class="container"> <!-- 使用横向时间线组件 --> <HorizontalTimeline :items="timelineItems" :active-index="activeIndex" @update:active-index="activeIndex = $event" > <!-- 自定义内容插槽 --> <template #content="{ item }"> <div class="custom-content"> <div class="icon-wrapper" :style="{ background: item.bgColor }"> <el-icon :size="24"> <component :is="item.icon" /> </el-icon> </div> <div class="title">{{ item.title }}</div> <div class="status" :style="{ color: item.statusColor }"> {{ item.status }} </div> </div> </template> </HorizontalTimeline> <!-- 显示当前激活项详情 --> <div v-if="activeItem" class="details"> <h3>{{ activeItem.title }}</h3> <p>{{ activeItem.description }}</p> <p>状态: <span :style="{ color: activeItem.statusColor }"> {{ activeItem.status }} </span></p> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; import HorizontalTimeline from './HorizontalTimeline.vue'; import { Calendar, Document, Coin, User, Check } from '@element-plus/icons-vue'; // 当前激活索引 const activeIndex = ref(0); // 时间线数据 const timelineItems = ref([ { title: '立项', timestamp: '2023-01-15', description: '项目正式立项，组建团队', status: '已完成', statusColor: '#67c23a', icon: Calendar, bgColor: '#f0f9eb' }, { title: '需求分析', timestamp: '2023-02-20', description: '收集并分析用户需求', status: '进行中', statusColor: '#409eff', icon: Document, bgColor: '#ecf5ff' }, { title: '开发', timestamp: '2023-03-25', description: '系统开发与编码实现', status: '未开始', statusColor: '#909399', icon: Coin, bgColor: '#f2f6fc' }, { title: '测试', timestamp: '2023-04-30', description: '系统测试与问题修复', status: '未开始', statusColor: '#909399', icon: User, bgColor: '#f2f6fc' }, { title: '上线', timestamp: '2023-05-30', description: '系统部署与正式上线', status: '未开始', statusColor: '#909399', icon: Check, bgColor: '#f2f6fc' } ]); // 计算当前激活项 const activeItem = computed(() => { return timelineItems.value[activeIndex.value]; }); </script> <style scoped> .container { max-width: 1200px; margin: 40px auto; padding: 20px; } .custom-content { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 8px; transition: all 0.3s; } .custom-content:hover { background: #f5f7fa; } .icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .title { font-weight: bold; margin: 5px 0; } .status { font-size: 0.8rem; } .details { margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #ebeef5; } </style> ``` ### 实现详解 1. **横向布局转换** - 使用 `direction="horizontal"` 属性启用Element Plus的横向时间线功能 - 通过CSS Flex布局实现项目的水平排列 - 调整时间戳位置到节点上方 - 重新设计连接线为水平线条 - 设置最小宽度保证基本布局稳定性 2. **组件封装设计** - 可配置属性： - `items`：时间线数据（必填） - `reverse`：是否反向显示 - `hollow`：空心节点样式 - `color`：节点颜色 - `size`：节点尺寸 - `activeIndex`：当前激活项索引 - 事件接口： - `item-click`：点击项时触发 - `update:active-index`：实现v-model绑定 3. **交互功能** - 点击项目时自动激活并高亮显示 - 鼠标悬停效果增强用户体验 - 激活状态特殊样式（放大节点、添加阴影） - 支持双向绑定activeIndex 4. **响应式设计** - 容器添加横向滚动支持小屏幕 - 使用媒体查询适配移动端布局 - 项目最小宽度自动调整 5. **可定制性** - 提供默认内容模板 - 支持通过插槽完全自定义内容 - 支持自定义节点样式和颜色 ### 使用场景 - 项目进度追踪 - 订单状态流程展示 - 产品开发路线图 - 操作步骤引导 - 历史事件时间线 - 任何需要水平展示时间顺序的场景