50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）

📅 我们继续 50 个小项目挑战！—— Progress Steps 组件

仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/

✨ 组件目标

• 展示一个多步骤的进度条，指示当前所处的步骤

• 提供“上一页”和“下一页”按钮，控制步骤的前进和后退

• 动态更新进度条的长度和步骤的样式

🧱 技术实现点

使用 Vue 3 的 Composition API 和 ref 实现响应式状态管理

通过 v-for 渲染步骤列表

利用 Tailwind CSS 的实用工具类，如 flex、transition、bg-gray-200、rounded-full 等

使用条件样式绑定 :class 实现步骤的动态样式

🔧 ProgressSteps.vue 组件实现

<template><div class="py-96"><div class="relative mx-auto flex max-w-2/3 items-center justify-between"><div class="absolute z-0 h-2 w-full rounded-full bg-gray-200"><div:style="{ width: `${(current / (steps.length - 1)) * 100}%` }"class="absolute top-0 bottom-0 left-0 h-full rounded-full bg-blue-500 transition-all duration-300 ease-in-out"></div></div><divv-for="item in steps":key="item":class="['z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 transition-all duration-500 ease-in-out',item.id - 1 <= current ? 'bg-blue-500 text-white' : 'bg-white',]">{{ item.id }}</div></div><div class="mt-10 flex items-center justify-center gap-20 text-white"><button:class="[current === 0 ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']"class="rounded-2xl border-2 p-2 active:scale-90"@click="update('prev')":disabled="current === 0">prev</button><button:class="[current === steps.length - 1? 'cursor-not-allowed opacity-50': 'cursor-pointer',]"class="rounded-2xl border-2 p-2 active:scale-90"@click="update('next')":disabled="current === steps.length - 1">next</button></div></div>
</template><script setup>
import { ref } from 'vue'const current = ref(0)const steps = ref([{ id: 1 },{ id: 2 },{ id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },{ id: 7 },{ id: 8 },{ id: 9 },{ id: 10 },
])const update = (type) => {if (type === 'prev') {if (current.value > 0) {current.value--}} else {if (current.value < steps.value.length - 1) {current.value++}}
}
</script>

💡 Tailwind CSS 样式重点讲解

类名	功能描述
flex	创建弹性布局
max-w-2/3	设置最大宽度为容器的 2/3
rounded-full	设置圆角为全圆
bg-gray-200 / bg-blue-500	设置背景颜色
transition-all duration-500	添加过渡动画效果
cursor-not-allowed	设置鼠标样式为不可点击
opacity-50	设置透明度为 50%
active:scale-90	设置点击时缩放效果

🦌 常量定义 + 组件路由

• constants/index.js 添加组件预览常量：

export const projectList = [{id: 2,title: 'Progress Steps',image: 'https://50projects50days.com/img/projects-img/2-progress-steps.png',link: 'ProgressSteps',},
]

• router/index.js 中添加路由选项：

{path: '/ProgressSteps',name: 'ProgressSteps',component: () => import('@/projects/ProgressSteps.vue'),
}

🚀 小结

• 使用 ref 管理当前步骤状态

• 通过 v-for 渲染步骤列表

• 使用条件样式绑定实现动态样式

• 利用 Tailwind CSS 的实用工具类快速构建 UI

📅 明日预告：Rotating Navigation！实现旋转导航菜单组件。

---

每天进步一点点，50 天后惊艳所有人！