<think>
我们只需要根据内容id来切换步骤条和内容，不需要上一步/下一步按钮。
思路：
1. 使用
Element UI的Steps组件，通过active属性绑定当前步骤索引。
2. 步骤索引可以通过当前内容id在步骤数组中的位置来确定。
3. 每个步骤可以点击，点击时切换当前内容id，从而改变激活的步骤和显示的内容。
4. 内容部分使用v-show或v-if根据当前内容id显示对应的内容。
我们将步骤配置和内容配置放在data中，通过计算属性currentStepIndex来根据currentContentId计算当前激活的步骤索引。
注意：这里我们不需要上一步/下一步按钮，所以
去掉按钮部分。
代码实现：
</think>
以下是一个简化版的
Vue + Element UI
+ CSS 实现，根据内容 ID 显示不同步骤内容的解决方案：
### 解决方案
```
vue
<template>
<div class="steps-container">
<!-- 步骤条 -->
<el-steps
:active="currentStepIndex"
finish-status="success"
align-center
class="dynamic-steps"
>
<el-step
v-for="(step, index) in stepsConfig"
:key="step.id"
:title="step.title"
:description="step.description"
@click="setActiveContent(step.id)"
/>
</el-steps>
<!-- 内容区域 -->
<div class="content-wrapper">
<div
v-for="content in contents"
:key="content.id"
class="content-item"
:class="{ active: activeContentId === content.id }"
>
<h3>{{ content.title }}</h3>
<div v-html="content.details"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DynamicSteps',
data() {
return {
activeContentId: 'step1', // 当前激活的内容ID
// 步骤配置
stepsConfig: [
{ id: 'step1', title: '步骤一', description: '基本信息' },
{ id: 'step2', title: '步骤二', description: '资料上传' },
{ id: 'step3', title: '步骤三', description: '审核确认' },
{ id: 'step4', title: '步骤四', description: '完成提交' }
],
// 内容配置
contents: [
{
id: 'step1',
title: '第一步内容',
details: '<p>这里是第一步的内容详情，ID为 step1</p><ul><li>项目1</li><li>项目2</li></ul>'
},
{
id: 'step2',
title: '第二步内容',
details: '<p>这里是第二步的内容详情，ID为 step2</p><div class="upload-area">上传区域</div>'
},
{
id: 'step3',
title: '第三步内容',
details: '<p>审核确认内容，ID为 step3</p><el-checkbox>我已阅读协议</el-checkbox>'
},
{
id: 'step4',
title: '第四步内容',
details: '<p>完成提交内容，ID为 step4</p><el-alert type="success">提交成功！</el-alert>'
}
]
};
},
computed: {
// 计算当前激活步骤的索引
currentStepIndex() {
return this.stepsConfig.findIndex(step => step.id === this.activeContentId);
}
},
methods: {
// 设置激活的内容ID
setActiveContent(contentId) {
this.activeContentId = contentId;
}
}
};
</script>
<style scoped>
.steps-container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ebeef5;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
.dynamic-steps {
margin-bottom: 40px;
}
/* 使步骤可点击 */
.el-step >>> .el-step__head,
.el-step >>> .el-step__title {
cursor: pointer;
transition: color 0.3s;
}
.el-step >>> .el-step__title:hover {
color: #409EFF;
}
/* 内容区域样式 */
.content-wrapper {
position: relative;
min-height: 300px;
padding: 25px;
border-radius: 8px;
background-color: #f8f9fa;
border: 1px solid #dcdfe6;
transition: all 0.3s ease;
}
.content-item {
position: absolute;
top: 25px;
left: 25px;
right: 25px;
opacity: 0;
transform: translateY(10px);
transition: all 0.5s ease;
visibility: hidden;
}
.content-item.active {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
/* 步骤状态指示器 */
::v-deep .el-step__head.is-process {
color: #409EFF;
border-color: #409EFF;
}
::v-deep .el-step__head.is-success {
color: #67C23A;
border-color: #67C23A;
}
</style>
```
### 实现原理说明
1. **数据结构设计**：
- `stepsConfig`：存储步骤信息（ID、标题、描述）
- `contents`：存储内容信息（ID、标题、详细内容）
- `activeContentId`：当前激活的内容ID（控制显示哪个内容）
2. **核心功能**：
- 使用`el-steps`组件展示步骤条
- 通过`currentStepIndex`计算属性将内容ID映射为步骤索引
- 点击步骤时调用`setActiveContent`方法更新激活的内容ID
3. **内容显示逻辑**：
- 使用`v-for`遍历所有内容项
- 通过`:class="{ active: activeContentId === content.id }"`控制当前显示的内容
- 使用CSS过渡动画实现平滑切换效果
4. **交互优化**：
- 步骤条可点击（添加`@click`事件）
- 鼠标悬停在步骤标题上时改变颜色（CSS过渡效果）
- 当前激活步骤显示不同颜色（蓝色表示进行中，绿色表示已完成）
5. **样式特性**：
- 内容区域使用绝对定位实现叠加效果
- 通过`opacity`和`transform`实现淡入淡出动画
- 添加阴影和圆角增强视觉效果
- 使用`::v-deep`穿透修改
Element UI组件内部样式
### 使用示例
1. 初始化显示`step1`对应的内容
2. 点击不同步骤标题切换内容
3. 内容切换时有平滑的淡入淡出动画
4. 当前步骤会高亮显示（蓝色圆圈）
5. 已完成步骤显示绿色成功状态
### 扩展建议
- 添加
路由支持：将内容ID同步到URL哈希值
- 增加数据持久化：使用localStorage保存当前步骤状态
- 添加
表单验证：切换步骤前验证当前内容
- 实现自定义图标：替换默认步骤图标
扫一扫
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
