---
title: 步骤条
date: 2023-05-28 16:17:38
permalink: /pages/component/steps
article: false
---

`cu-steps` 步骤条必选值

## 基本用法

1. `cu-steps` 和 `cu-item` 配合使用
2. 对应右侧基本用法第一个

```vue
<view class="bg-white padding">
	<view class="cu-steps">
		<view class="cu-item" :class="index>basics?'':'text-red'" v-for="(item,index) in basicsList" :key="index">
			<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
		</view>
	</view>
</view>
 
<script>
	export default {
		data() {
			return {
				basicsList: [{cuIcon: 'usefullfill',name: '开始'}, 
                                    {cuIcon: 'radioboxfill',name: '等待'}, 
                                    {cuIcon: 'roundclosefill',name: '错误'},
                                    {cuIcon: 'roundcheckfill',name: '完成'
				}],
				basics: 0
			};
		},
		methods: {
			BasicsSteps() {
				this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1				
			}
		}
	}
</script>
```

1. 步骤条的颜色和图标都可以自定义
2. 对应右侧基本用法第二个

```html
<view class="bg-white padding margin-top-xs">
	<view class="cu-steps">
		<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
			<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
		</view>
	</view>
</view>
```

1. 步骤之间的连接默认是横线，也可以通过类名 `steps-arrow` 换成箭头
2. 对应右侧基本用法第三个


```html
<view class="bg-white padding  margin-top-xs">
	<view class="cu-steps steps-arrow">
		<view class="cu-item" :class="index>basics?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
			<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
		</view>
	</view>
</view>
```


## 数字完成

1. 通过类名 `num` 可以设置默认图标为数字，已完成且正确的图标为勾，已完成但错误的图标由类名 `err` 定义

```html
<view class="bg-white padding">
	<view class="cu-steps">
		<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
			<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
		</view>
	</view>
</view>
```

## 多级显示

1. 多级显示需要配合 `scroll-view` 标签使用 ，并增加类名 `steps-bottom`

```vue
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" :scroll-into-view="'scroll-' + scroll"
 scroll-with-animation>
	<view class="cu-item padding-lr-xl" :class="index>scroll?'':'text-blue'" v-for="(item,index) in 10" :key="index" :id="'scroll-' + index">
		Level {{index + 1}} <text class="num" :data-index="index + 1"></text>
	</view>
</scroll-view>
 
<script>
	export default {
		data() {
			return {
				scroll: 0
			};
		},
		methods: {
			ScrollSteps() {
				this.scroll= this.scroll == 9 ? 0 : this.scroll + 1				
			}
		}
	}
</script>
```

## 步骤条相关class 

|class	|说明|	可选值|
|--	|--|	--|
|cu-steps	|步骤条必选值|	——|
|cu-item|	步骤条子元素|	——|
|num	|数字步骤条未完成图标	|——|
|err|	错误图标|	——|
|steps-arrow	|步骤条连接箭头	——|
|steps-bottom	|配合多级步骤条使用（图标在下，文字在上，放在其他步骤条样式会错乱）|	——|