cu-steps 步骤条必选值

基本用法

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

<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. 对应右侧基本用法第二个

<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. 对应右侧基本用法第三个

<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 定义

<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

<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	配合多级步骤条使用（图标在下，文字在上，放在其他步骤条样式会错乱）	——