更新记录

1.0.3（2025-11-04） 下载此版本

fix：组件主题

1.0.2（2024-08-06） 下载此版本

修改文档

1.0.1（2024-07-30） 下载此版本

适配r-config-provider

平台兼容性

uni-app(4.52)

r-steps

r-steps步骤条，用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

示例

<template>
  <r-config-provider>
    <view style="padding: 20rpx">
      <r-divider content-position="left">基本使用</r-divider>
      <r-steps
        :active="active"
        @click-step="
          (index) => {
            active = index;
          }
        "
      >
        <r-step>买家下单</r-step>
        <r-step>商家接单</r-step>
        <r-step>买家提货</r-step>
        <r-step>交易完成</r-step>
      </r-steps>
      <r-divider content-position="left">自定义样式</r-divider>
      <r-steps
        :active="active2"
        active-icon="success"
        active-color="#07c160"
        inactive-icon="arrow"
        @click-step="
          (index) => {
            active2 = index;
          }
        "
      >
        <r-step>买家下单</r-step>
        <r-step>商家接单</r-step>
        <r-step>买家提货</r-step>
        <r-step>交易完成</r-step>
      </r-steps>

      <r-divider content-position="left">竖向步骤条 </r-divider>

      <r-steps
        direction="vertical"
        :active="active3"
        @click-step="
          (index) => {
            active3 = index;
          }
        "
      >
        <r-step>
          <view>【城市】物流状态1</view>
          <text>2016-07-12 12:40</text>
        </r-step>
        <r-step>
          <view>【城市】物流状态2</view>
          <text>2016-07-11 10:00</text>
        </r-step>
        <r-step>
          <view>快件已发货</view>
          <text>2016-07-10 09:30</text>
        </r-step>
      </r-steps>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
const active = ref(1);
const active2 = ref(2);
const active3 = ref(0);
</script>

API

Steps Props

Steps Events

Step Slots

更多组件，请前往rainui