LimeUI+1.0.0

主题

LimeSteps 步骤条 ​

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

安装 ​

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

注意

  • 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
  • 🔔 不需要lime-svg在lime-icon代码中注释掉即可
html
// 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> -->

文档 ​

steps

代码演示 ​

基础 ​

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

html
<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>
js
const current = ref(1);
const change = (value : number) => {
	current.value = value;
}

图标 ​

通过 icon 属性设置图标。

html
<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 可以小圆点的简略模式。

html
<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）。

html
<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可以设置完成的背景色。

html
<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 属性来改变步骤条的显示方向。

html
<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 插槽可自定义额外内容。

html
<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>

查看示例 ​

  • 导入后直接使用这个标签查看演示效果
html
 // 代码位于 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部分加上这一段即可.
js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API ​

Steps Props ​

参数说明类型默认值
v-model当前步骤对应的索引值number0
current当前步骤对应的索引值number0
status用于控制 current 指向的步骤条的状态。可选项：wait/process/finish/errorstringprocess
layout步骤条方向，有两种：横向和纵向。可选项：horizontal/verticalstringhorizontal
readonly只读状态booleanfalse
type步骤条风格。可选项：default/dotstringdefault
activeColor当前步骤和已完成步骤的颜色string``
waitColor未激活步骤的颜色string``
waitBgColor未激活步骤的背景颜色string-
finishBgColor已完成步骤的背景颜色string-

Step Props ​

参数说明类型默认值
content步骤描述string-
icon图标，默认显示内置图标string-
title标题string``
status当前步骤的状态：默认状态（未开始）、进行中状态、完成状态、错误状态。可选项：wait/process/finish/errorbooleanwait

Steps Events ​

事件名说明回调参数
change当前步骤发生变化时触发index: number

Step Slots ​

名称说明值
icon图标status
title标题-
content步骤描述-
extra额外-

主题定制 ​

样式变量 ​

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

名称默认值描述
--l-step-dot-size:16rpx-
--l-step-circle-size:44rpx-
--l-step-circle-font-size:28rpx-
--l-step-circle-icon-size:32rpx-
--l-step-description-color:$text-color-3-
--l-step-wait-circle-bg-color:$gray-1-
--l-step-wait-circle-color:$text-color-3-
--l-step-wait-title-color:$text-color-3-
--l-step-wait-icon-color:$text-color-3-
--l-step-wait-dot-border-color:$gray-4-
--l-step-process-circle-color:white-
--l-step-process-circle-bg-color:$primary-color-
--l-step-process-title-color:$primary-color-
--l-step-process-icon-color:$primary-color-
--l-step-process-dot-border-color:$primary-color-
--l-step-finish-circle-color:$primary-color-
--l-step-finish-circle-bg-color:$primary-color-1-
--l-step-finish-title-color:$primary-color-1-
--l-step-finish-icon-color:$primary-color-
--l-step-finish-dot-border-color:$primary-color-
--l-step-error-circle-color:$error-color-
--l-step-error-circle-bg-color:$error-color-1-
--l-step-error-title-color:$error-color-1-
--l-step-error-icon-color:$error-color-
--l-step-error-dot-border-color:$error-color-
--l-step-line-color:$gray-4-
--l-step-finish-line-color:$primary-color-

常见问题 ​

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

html
// 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> -->

打赏 ​

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

源代码 ​

组件源码