更新记录

0.0.1（2024-11-17） 下载此版本

• init

平台兼容性

lime-steps 步骤条

• 用于任务步骤展示或任务进度展示，让用户了解当前的操作在整体流程中的位置
• 插件依赖lime-style,lime-shared,lime-icon,lime-svg不喜勿下

安装

在插件市场导入,首次导入可能需要重新编辑

代码演示

基础

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/compoents/lime-steps 
<lime-steps />

插件标签

• 默认 l-steps 为 component
• 默认 l-step 为 component
• 默认 lime-steps 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Steps Props

Step Props

Steps Events

Step Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

常见问题

插件包含一下lime-svg为收费插件。如果你不需要svg，可以在lime-icon里注释掉，lime-svg为APP原生插件，收费为1元，源码为5元。如果你需要svg，可以考虑一下购买。

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。