Rainui

Appearance

r-steps ​

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

示例 ​

vue
<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 ​

名称说明类型默认值可选值
active当前步骤对应的索引值Number | String0-
direction步骤条方向Stringhorizontalvertical
activeIcon当前步骤对应的底部图标Stringchecked-
inactiveIcon非当前步骤对应的底部图标String--
finishIcon已完成步骤对应的底部图标，优先级高于 inactiveIconString--
activeColor当前步骤和已完成步骤的颜色String#1989fa-
inactiveColor未激活步骤的颜色String#969799
iconPrefix图标类名前缀Stringvan-icon
themeNamer-theme 主题名称Stringdefault

Steps Events ​

名称说明参数
click-step点击步骤的标题或图标时触发index

Step Slots ​

名称说明
default步骤内容
activeIcon自定义激活状态图标
inactiveIcon自定义未激活状态图标
finishIcon自定义已完成步骤对应的底部图标，优先级高于 inactiveIcon

更多组件，请前往rainui