ProgressBar 进度条组件
用于显示制作变焦镜的步骤进度，包含标题、步骤指示器和完成按钮。
功能特性
- 🎯 显示制作变焦镜的四个步骤：前期准备、中期拍摄、后期剪辑、即可开启实战
- 🎨 蓝色渐变背景，符合设计规范
- 📱 响应式设计，支持移动端
- ⚡ 支持步骤状态管理和事件回调
- 🖼️ 使用项目统一的图片资源管理
使用方法
<template>
<ProgressBar
:current-step="currentStep"
@complete="handleComplete"
@step-change="handleStepChange"
/>
</template>
<script setup>
import { ref } from 'vue'
import { ProgressBar } from '@/components'
const currentStep = ref(0)
const handleComplete = () => {
console.log('完成前置条件，开启实战！')
// 处理完成逻辑
}
const handleStepChange = step => {
console.log('步骤变化:', step)
// 处理步骤变化逻辑
}
</script>
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| currentStep | number | 0 | 当前步骤索引 (0-3) |
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
| complete | - | 点击完成按钮时触发 |
| stepChange | step: number | 步骤变化时触发 |
样式定制
组件使用 scoped 样式，可以通过以下 CSS 变量进行定制：
.progress-bar {
--primary-color: #4a90e2;
--secondary-color: #7bb3f0;
--accent-color: #00ffff;
--text-color: white;
}
使用示例
不同状态展示
<template>
<!-- 初始状态：未开始 -->
<ProgressBar :current-step="0" />
<!-- 进行中：当前在第3步 -->
<ProgressBar :current-step="2" />
<!-- 即将完成：当前在第4步，可以点击完成按钮 -->
<ProgressBar :current-step="3" />
</template>
状态说明
- 未解锁：
currentStep < 3，显示"未解锁"状态 - 已解锁：
currentStep >= 3，显示"已解锁"状态 - 可完成：
currentStep === 3，完成按钮可点击
响应式断点
- 桌面端：> 768px
- 平板端：≤ 768px
- 移动端：≤ 480px