更新记录

0.0.5（2025-08-31） 下载此版本

• chore: 更新文档

0.0.4（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.3（2025-02-13） 下载此版本

• fix: 修复因uniapp x ios无法监听元素，导致条线不显示问题

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-steps 步骤条组件

一个功能丰富的步骤条组件，用于展示流程进度。支持横向和纵向布局、自定义状态、主题定制等多种配置，可用于展示订单流程、任务进度等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 步骤条组件文档 - 站点1
• 步骤条组件文档 - 站点2
• 步骤条组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-steps
2. 导入后可能需要重新编译项目
3. 在页面中使用l-steps和l-step组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础

current 属性表示当前步骤的索引，从 0 起计。

<l-steps :current="current" @change="change">
    <l-step title="买家下单" content="辅助信息"></l-step>
    <l-step title="商家接单" content="辅助信息"></l-step>
    <l-step title="买家提货" content="辅助信息"></l-step>
    <l-step title="交易完成" content="辅助信息"></l-step>
</l-steps>

const current = ref(1);
const change = (value : number) => {
    current.value = value;
}

图标

通过 icon 属性设置图标。

<l-steps :current="current" @change="change">
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息"></l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

图标

通过 type 属性设置dot 可以小圆点的简略模式。

<l-steps :current="current"  type="dot" @change="change">
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息"></l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

状态

通过status属性设置状态, 共支持 4 种状态：未完成（wait）、已完成（finish）、进行中（process）、错误（error）。

<l-steps :current="current"  @change="change">
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息" status="error"></l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

自定义样式

通过activeColor属性设置当前激活色,finishBgColor可以设置完成的背景色。

<l-steps :current="current"  @change="change" activeColor="#FFB400" finishBgColor="rgba(255, 180, 0, 0.1)">
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息"></l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

竖向步骤条

可以通过设置 layout 属性来改变步骤条的显示方向。

<l-steps :current="current"  @change="change" layout="vertical" >
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息"></l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

竖向自定义内容

可以通过 extra 插槽可自定义额外内容。

<l-steps :current="current"  @change="change" layout="vertical" >
    <l-step icon="cart" title="买家下单" content="辅助信息"></l-step>
    <l-step icon="cart" title="商家接单" content="辅助信息">
        <template #extra>
            <view>
                <image
                    src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ"
                    alt="图标"
                    style="width: 100%;"
                    mode="widthFix"/>
            </view>
        </template>
    </l-step>
    <l-step icon="cart" title="买家提货" content="辅助信息"></l-step>
    <l-step icon="cart" title="交易完成" content="辅助信息"></l-step>
</l-steps>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-steps/components/lime-steps -->
<lime-steps />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

steps Props 属性

Steps Events

step Props

Step Slots

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助