uniapp步骤条使用

最近公司有一个这种需求，就是需要画一个简单步骤条，然后能显示进度。

在components新建一个Step.vue文件，上代码（使用的是Vue3写法）：

<template>
	<div>
		<view class="box-top" v-for="(item,index) in dataArray" :key="index">
			<view class="left-box-top">{{item.time}}</view> <!-- 左边 -->

			<view class="line" :class="{active:item.active,none:index==(dataArray.length-1)}"><!-- 中线 -->
				<view class="dot" :class="{active:item.active}"></view> <!-- 圆点 -->
			</view>

			<view class="right-box-top"> <!-- 右边 -->
				<view>{{item.content}}</view>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const props = defineProps({
		dataArray: {
			type: Array
		}
	})
</script>

<style lang="scss">
	.box-top {
		width: 100%;
		min-height: 120rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;

		.left-box-top {
			width: 180rpx;
			text-align: center;
			color: rgba(198, 198, 198, 1);
			font-size: 20rpx;
		}

		.line {
			width: 4rpx;
			background-color: #999999;
			margin: 0 20rpx 0 20rpx;

			.dot {
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid #979797;
				background-color: #FFFFFF;
				border-radius: 50%;
				position: relative;
				left: -10rpx;
			}
		}

		.right-box-top {
			flex: 1;
			padding: 0 0 20rpx 0;
		}
	}

	//激活元素
	.active {
		background: #161874 !important;
	}

	// 隐藏元素
	.none {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>

然后在页面使用：

<template>
	<div class="about">
		<timeAxis :dataArray="dataArray"></timeAxis>
	</div>
</template>
<script setup>
	import timeAxis from '@/components/Step.vue'
	import {
		ref,
		reactive
	} from 'vue'
	const dataArray = reactive([{
		time: '2020-11-25 17:32:15',
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: true
	}, {
		time: '2020-11-25 17:32:15',
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: false
	}, {
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: false
	}, {
		time: '2020-11-25 17:32:15',
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: false
	}, {
		time: '2020-11-25 17:32:15',
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: false
	}, {
		time: '2020-11-25 17:32:15',
		content: '处理进度详情处理进度详情处理进度详情，处',
		active: false
	}, ])
</script>

<style scoped lang="scss">
	
</style>