更新记录

1.0.0（2025-08-04） 下载此版本

新增StepProgress 步骤进度组件

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

StepProgress 步骤进度组件

一个功能强大的步骤进度指示器组件，支持动态宽度计算、自定义样式和交互功能。

功能特性

• ✅ 动态宽度计算 - 自动计算元素间距，无需写死宽度
• ✅ 连接线动画 - 当前步骤之前的连接线为绿色，之后为灰色
• ✅ 自定义样式 - 支持自定义颜色、大小、字体等
• ✅ 点击交互 - 支持点击步骤切换（可选）
• ✅ 响应式设计 - 适配不同屏幕尺寸
• ✅ 动画效果 - 平滑的过渡动画
• ✅ 完成状态 - 已完成的步骤显示对勾图标

基本用法

<template>
  <StepProgress 
    :currentStep="currentStep" 
    :steps="stepData"
  />
</template>

<script setup>
import StepProgress from '@/components/StepProgress/StepProgress.vue';

const currentStep = ref(0);
const stepData = reactive([
  { title: '经营信息' },
  { title: '商户设置' },
  { title: '账户设置' },
  { title: '联系人设置' }
]);
</script>

高级用法

<template>
  <StepProgress 
    :currentStep="currentStep" 
    :steps="stepData"
    :clickable="true"
    :activeColor="#57BC40"
    :inactiveColor="#E5E5E5"
    :circleSize="60"
    :titleSize="26"
    @stepClick="handleStepClick"
  />
</template>

Props 参数

Events 事件

样式说明

状态样式

• 未完成：灰色圆圈 + 灰色连接线 + 灰色标题
• 当前步骤：绿色圆圈 + 数字 + 绿色标题
• 已完成：绿色圆圈 + 对勾图标 + 绿色连接线

响应式设计

• 小屏幕自动调整字体大小
• 保持组件比例协调

动画效果

• 圆圈缩放动画（hover时）
• 颜色过渡动画
• 淡入动画

使用示例

1. 基础步骤指示器

<StepProgress 
  :currentStep="0" 
  :steps="[
    { title: '步骤1' },
    { title: '步骤2' },
    { title: '步骤3' }
  ]"
/>

2. 可点击的步骤指示器

<StepProgress 
  :currentStep="currentStep" 
  :steps="stepData"
  :clickable="true"
  @stepClick="handleStepClick"
/>

3. 自定义样式

<StepProgress 
  :currentStep="currentStep" 
  :steps="stepData"
  :activeColor="#FF6B6B"
  :inactiveColor="#F0F0F0"
  :circleSize="70"
  :titleSize="28"
  :lineHeight="6"
/>

4. 完整页面示例

<template>
  <view class="container">
    <!-- 步骤指示器 -->
    <StepProgress 
      :currentStep="currentStep" 
      :steps="stepData"
      :clickable="true"
      @stepClick="handleStepClick"
    />

    <!-- 步骤内容 -->
    <view class="step-content">
      <view v-if="currentStep === 0">步骤1内容</view>
      <view v-else-if="currentStep === 1">步骤2内容</view>
      <view v-else-if="currentStep === 2">步骤3内容</view>
    </view>

    <!-- 操作按钮 -->
    <view class="actions">
      <u-button @click="prevStep">上一步</u-button>
      <u-button @click="nextStep">下一步</u-button>
    </view>
  </view>
</template>

注意事项

1. currentStep 从0开始：第一个步骤的索引是0
2. 动态宽度：组件会自动计算每个步骤的宽度，无需手动设置
3. 连接线：最后一个步骤不会显示连接线
4. 响应式：在小屏幕上会自动调整字体大小
5. 动画性能：使用了CSS3动画，性能良好

兼容性

• ✅ 微信小程序
• ✅ H5
• ✅ App
• ✅ 其他uni-app支持的平台