更新记录

1.0.3(2024-08-06) 下载此版本

修改文档

1.0.2(2024-07-30) 下载此版本

适配r-config-provider

1.0.1(2024-07-26) 下载此版本

更新文档

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

r-step

r-step步骤条,用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。该组件是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

名称 说明 类型 默认值 可选值
active 当前步骤对应的索引值 Number | String 0 -
direction 步骤条方向 String horizontal vertical
activeIcon 当前步骤对应的底部图标 String checked -
inactiveIcon 非当前步骤对应的底部图标 String - -
finishIcon 已完成步骤对应的底部图标,优先级高于 inactiveIcon String - -
activeColor 当前步骤和已完成步骤的颜色 String #1989fa -
inactiveColor 未激活步骤的颜色 String #969799
iconPrefix 图标类名前缀 String van-icon
themeName r-theme 主题名称 String default

Steps Events

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

Step Slots

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

更多组件,请前往rainui

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问