步骤条

Steps步骤条: 支持横向与纵向以及基本样式设置。

组件结构

<template>
	<view class="tui-steps-box" :class="{'tui-steps-column':direction==='column'}">
		<view class="tui-step-item" :style="{width:direction==='column'?'100%':spacing}" :class="[direction==='row'?'tui-step-horizontal':'tui-step-vertical']"
		 v-for="(item,index) in items" :key="index">
			<view class="tui-step-item-ico" :style="{width:direction==='column'?'36rpx':'100%'}">
				<view class="tui-step-ico" :class="[direction==='column'?'tui-step-column_ico':'tui-step-row_ico']" :style="{width:type==2 || activeSteps===index?'36rpx':'16rpx',height:type==2 || activeSteps===index?'36rpx':'16rpx',backgroundColor:index<=activeSteps?activeColor:(type==2?'#fff':deactiveColor),borderColor:index<=activeSteps?activeColor:deactiveColor}">
					<!-- <icon type="success_no_circle" :size="12"  color="#fff"></icon> -->
					<text v-if="activeSteps!==index" :style="{color:index<=activeSteps?'#fff':''}">{{type==1?'':index+1}}</text>
					<tui-icon name="check" :size="16" color="#fff" v-if="activeSteps===index"></tui-icon>
				</view>
				<view class="tui-step-line" :class="['tui-step-'+direction+'_line']" :style="{backgroundColor:index<=activeSteps-1?activeColor:deactiveColor}"
				 v-if="index!=items.length-1"></view>
			</view>
			<view class="tui-step-item-main" :class="['tui-step-'+direction+'_item_main']">
				<view class="tui-step-item-title" :style="{color:index<=activeSteps?activeColor:deactiveColor,fontSize:titleSize+'rpx',lineHeight:titleSize+'rpx',fontWeight:bold?'bold':'normal'}">
					{{item.title}}
				</view>
				<view class="tui-step-item-content" :style="{color:index<=activeSteps?activeColor:deactiveColor,fontSize:descSize+'rpx'}">
					{{item.desc}}
				</view>
			</view>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiSteps',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
type Number 1-默认步骤 2-数字步骤 []
spacing String 间距 160rpx
direction String 方向 row column row
activeColor String 激活状态成功颜色 #5677fc
deactiveColor String 未激活状态颜色 #999999
titleSize Number title字体大小 28
bold Boolean title是否粗体 false
descSize Number desc字体大小 24
activeSteps Number 当前步骤 -1
items Array 步骤项 [{
 title: "标题",
 desc: "描述"
}]

methods

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/steps/steps

H5二维码

小程序二维码