更新记录

1.0.0（2026-07-22） 下载此版本

• 新增 横向和纵向步骤条
• 新增 标题和描述的选中、未选中样式
• 新增 选中、未选中节点插槽
• 新增 连接线类型配置
• 新增 横向文字上下布局和纵向文字左右布局

平台兼容性

uni-app(5.15)

wrc-steps 自定义步骤条

wrc-steps 是一个支持横向和纵向布局的步骤条组件，可分别设置标题和描述样式，也可以通过插槽自定义节点。

基础用法

<wrc-steps
    :options="steps"
    :active="1"
    direction="row"
    text-position="bottom"
    line-type="dashed"
/>

属性

样式对象为空时，组件会保留标题和描述的默认字号、行高及对齐方式。样式对象中传入的字段会覆盖对应默认样式。

自定义文字样式

<wrc-steps
    :options="steps"
    :active="1"
    :active-text-style="{
        color: '#0259D7',
        fontSize: '30rpx',
        fontWeight: '600'
    }"
    :deactive-text-style="{
        color: '#999999',
        fontSize: '26rpx'
    }"
    :active-desc-style="{
        color: '#0259D7',
        fontSize: '24rpx'
    }"
    :deactive-desc-style="{
        color: '#B7BDC6',
        fontSize: '22rpx'
    }"
/>

自定义节点

<wrc-steps :options="steps" :active="1">
    <template #active-node="{ index }">
        <view class="active-node">{{ index + 1 }}</view>
    </template>

    <template #inactive-node="{ index, completed }">
        <view :class="completed ? 'completed-node' : 'inactive-node'">
            {{ index + 1 }}
        </view>
    </template>
</wrc-steps>

active-node 提供 item、index；inactive-node 提供 item、index、completed。