uniapp通用递进式步骤组件

通用递进步骤组件的核心原理

一、状态驱动的步骤管理

组件通过响应式数据管理步骤状态，核心状态包括：

步骤完成状态 ：用数组steps存储每个步骤的完成标记（completed: true/false），例如：
复制代码
```
steps = [{ completed: false }, { completed: false }, ...]
```
当前步骤索引 ：用currentStep记录当前显示的步骤位置，通过修改该值切换步骤视图。

二、递进规则的权限控制

实现 "必须完成上一步才能进入下一步" 的核心逻辑是前置步骤校验：

定义canJump(index)方法，判断目标步骤是否可访问：
- 第一步默认可访问（index === 0）；
- 后续步骤需满足 "上一步已完成"（steps[index - 1].completed）。
点击步骤导航时，通过该方法拦截非法跳转（如未完成步骤 1 时无法直接跳转到步骤 3）。

三、视图与状态的联动

导航样式动态绑定 ：
- 根据currentStep标记当前激活步骤；
- 根据completed标记完成状态（显示对勾、绿色样式）；
- 根据canJump标记禁用状态（灰色样式、无法点击）。
内容区域条件渲染 ：
- 通过v-if="currentStep === index"匹配当前步骤，仅渲染对应内容；
- 利用插槽（slot）实现内容自定义，保持组件通用性。

四、步骤推进的逻辑闭环

下一步操作 ：点击 "下一步" 时，先将当前步骤标记为completed: true，再将currentStep + 1进入下一级；
完成操作：最后一步点击 "完成" 时，标记最终步骤完成并触发全局完成事件；
状态持久化：所有步骤状态保存在响应式数据中，确保页面刷新或操作后状态不丢失。

五、组件解耦与复用

通过插槽机制分离 "步骤框架" 与 "业务内容"：

组件仅提供递进逻辑和导航 UI，具体步骤内容由父组件通过插槽传入；
父组件无需关心递进规则，只需调用组件暴露的next/finish方法推进流程。

总结

该组件的核心是 **"状态管理 + 规则校验 + 视图联动"** 的三层架构：

用响应式状态记录步骤进度；
用前置校验保证递进规则；
用条件渲染和样式绑定实现视图与状态同步。这种设计既保证了递进逻辑的严谨性，又通过插槽实现了业务内容的灵活定制，达到 "通用框架 + 个性化内容" 的复用效果。

使用示例

复制代码

<template>
  <step-container @complete="handleComplete">
    <!-- 步骤1 -->
    <template #step1="{ next }">
      <view>
        <text>步骤1内容</text>
        <button @tap="next">下一步</button>
      </view>
    </template>
    
    <!-- 步骤2 -->
    <template #step2="{ next }">
      <view>
        <text>步骤2内容</text>
        <button @tap="next">下一步</button>
      </view>
    </template>
    
    <!-- 步骤3 -->
    <template #step3="{ next }">
      <view>
        <text>步骤3内容</text>
        <button @tap="next">下一步</button>
      </view>
    </template>
    
    <!-- 步骤4 -->
    <template #step4="{ finish }">
      <view>
        <text>步骤4内容</text>
        <button @tap="finish">完成</button>
      </view>
    </template>
  </step-container>
</template>

<script setup>
import StepContainer from "@/components/StepContainer.vue";

const handleComplete = () => {
  uni.showToast({
    title: "所有步骤完成",
    icon: "success"
  });
};
</script>