uv-ui

# Steps 步骤条

✈

组件名：uv-steps > uv-steps-item

点击下载&安装 (opens new window)

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ × √ √ √ √

说明

由于安卓nvue下，overflow属性不支持visible值，故此组件暂不支持安卓nvue环境。

# 基本使用

  • 该组件需要uv-steps和uv-steps-item配合使用
  • 通过current属性标识目前处于第几步，从0开始
<template>
	<uv-steps current="0">
		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 错误状态

通过uv-steps-item的error属性设为true，当前步骤将会为“失败”的状态

<template>
	<uv-steps current="1">
		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
		<uv-steps-item error title="仓库着火" desc="10:35"></uv-steps-item>
		<uv-steps-item title="破产清算" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 步骤条模式

通过dot属性设置为true的话，将会以点状的形式展示步骤条样式

<template>
	<uv-steps current="1" dot>
		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 竖向模式

通过direction属性设置为column，组件将会以竖向的形式展示步骤条内容

<template>
	<uv-steps current="1" direction="column">
		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 自定义图标

  • 通过activeIcon属性可以设置激活状态的图标
  • 通过inactiveIcon属性可以设置非激活状态的图标
<template>
	<uv-steps current="1" activeIcon="checkmark" inactiveIcon="arrow-right">
		<uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 通过插槽自定义图标

  • 通过插槽icon自定义图标
  • 通过inactive-color属性设置选中前的颜色，如果通过插槽icon自定义图标，该颜色设置的只有线条颜色
  • 通过active-color属性设置选中后的颜色，如果通过插槽icon自定义图标，该颜色设置的只有线条颜色
<template>
	<uv-steps current="1" active-color="#3c9cff" inactive-color="#999">
		<uv-steps-item title="已下单" desc="09:35">
			<template v-slot:icon>
				<uv-icon name="checkmark" color="#3c9cff"></uv-icon>
			</template>
		</uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35">
			<template v-slot:icon>
				<uv-icon name="checkmark" color="#3c9cff"></uv-icon>
			</template>
		</uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 通过插槽自定义内容

  • 通过插槽title自定义标题内容
  • 通过插槽desc自定义描述内容
<template>
	<uv-steps current="1">
		<uv-steps-item>
			<template v-slot:title>
				<text>已下单</text>
			</template>
			<template v-slot:desc>
				<text>00:00</text>
			</template>
		</uv-steps-item>
		<uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
		<uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
	</uv-steps>
</template>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Steps Props

参数 说明 类型 默认值 可选值
direction row - 横向，column - 竖向 String row row | column
current 设置当前处于第几步 Number | String 0 -
activeColor 激活状态颜色 String #3c9cff -
inactiveColor 未激活状态颜色 String #969799 -
activeIcon 激活状态的图标 String - -
inactiveIcon 未激活状态图标 String - -
dot 是否显示点类型 Boolean false true | false
customStyle 自定义外部样式 Object -

# StepsItem Props

参数 说明 类型 默认值 可选值
title 标题文字 String - -
desc 描述文本 String - -
iconSize 图标大小，需要uv-steps设置activeIcon或inactiveIcon。单位px(rpx) String | Number 17 -
error 当前步骤是否处于失败状态 Boolean false true | false
customStyle 自定义外部样式，可以利用该属性设置padding调整间距等场景 Object -

# StepsItem Slots

名称 说明
icon 自定义图标
title 自定义标题文字
desc 自定义描述文字

← Subsection 分段器 →