vue自己封装一个步骤条组件

实现效果如图：

 代码如下：

子组件：

<!-- Step.vue  -->
<template>
	<div class="stepOut">
		<ul style="list-style: none;display: flex;">
			<li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
				<!-- 模拟步骤条的节点，此处为圆圈 -->
				<div :class="stepInfo.step >= index+1 ? 'icon active':'icon'"></div>
				<!-- 模拟步骤条连接线，动态显示  -->
				<div :class="stepInfo.step >= index+2 ? 'line lineActive':'line'"
					v-show="index!==stepInfo.list.length-1"></div>
				<!-- 步骤名称  -->
				<div :class="stepInfo.step >= index+1 ? 'stepStatus':'stepStatus2'">{{stepItem.name}}</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'steps',
		props: {
			// 传递步骤参数
			stepInfo: {
				type: Object,
				default: function() {
					return {
						list: [],
						step: 0
					}
				}
			}
		}
	}
</script>

<style scoped>
	.stepOut {
		padding-top: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	/* 两点间间距 */
	.stepOut .stepItem {
		width: 400px;
		height: 70px;
		float: left;
		font-size: 16px;
		position: relative;
	}

	.stepOut .stepItem .icon {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #e2e2e2;
		/* margin: 0 auto; */
		position: relative;
		z-index: 888;
	}

	.stepOut .stepItem .active {
		background-color: #F05D4B;
	}

	/* 线条 */
	.stepOut .stepItem .line {
		position: absolute;
		top: 6px;
		left: 30px;
		border-bottom: 2px solid #e9e9e9;
		width: 350px;
		z-index: 111;
	}

	.stepOut .stepItem .lineActive {
		border-bottom: 2px solid #F05D4B;
	}
	/* 下面字体颜色 */
	.stepOut .stepItem .stepStatus {
		color: #F05D4B;
		line-height: 36px;
	}
	.stepOut .stepItem .stepStatus2 {
		color: #999999;
		line-height: 36px;
	}
</style>

父组件中：

<template>
  <div>
    <!-- 步骤条-->
	<steps :stepInfo="stepInfo"></steps>
  </div>
</template>
<script>
	import steps from "../../../components/steps.vue"
	export default {
		components: {
			steps,
		},
		data() {
			return {
				// 步骤条内容
				stepInfo: {
					list: [{
							name: '发现故障'
						},
						{
							name: '派发工单'
						},
						{
							name: '故障处理'
						},
					],
                   //步骤条进度
					step: 2
				},
</script>

在原基础上又根据UI需求搞了个更花里胡哨一点的：

代码如下：

<!-- Step.vue  -->
<template>
	<div class="stepOut">
		<ul style="list-style: none;display: flex;">
			<li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index">
				<!-- 模拟步骤条的节点，此处为圆圈 -->
				<div :class="stepInfo.step >= index+1 ? index=='0'?'icon active':index=='1'?'icon active1':'icon active2' :'icon'"></div>
				<!-- 模拟步骤条连接线，动态显示  -->
				<div :class="stepInfo.step >= index+2 ? index=='0'?'line lineActive':'line lineActive1':'line'"
					v-show="index!==stepInfo.list.length-1"></div>
				<!-- 步骤名称  -->
				<div :class="stepInfo.step >= index+1 ?  index=='0'?'stepStatus':index=='1'?'stepStatus1':'stepStatus2' :'stepStatus3'">{{stepItem.name}}</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'steps',
		props: {
			// 传递步骤参数
			stepInfo: {
				type: Object,
				default: function() {
					return {
						list: [],
						step: 0
					}
				}
			}
		}
	}
</script>

<style scoped>
	.stepOut {
		padding-top: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	/* 两点间间距 */
	.stepOut .stepItem {
		width: 400px;
		height: 70px;
		float: left;
		font-size: 16px;
		position: relative;
	}

	.stepOut .stepItem .icon {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #e2e2e2;
		/* margin: 0 auto; */
		position: relative;
		z-index: 888;
	}

	.stepOut .stepItem .active {
		background-color: #F05D4B;
	}
	.stepOut .stepItem .active1 {
		background-color: #F29927;
	}
	.stepOut .stepItem .active2 {
		background-color: #02C6A3;
	}
	/* 线条 */
	.stepOut .stepItem .line {
		position: absolute;
		top: 6px;
		left: 22px;
		border-bottom: 2px solid #e9e9e9;
		width: 370px;
		z-index: 111;
	}

	.stepOut .stepItem .lineActive {
		border-bottom: 2px solid #F29927 ;
	}
	.stepOut .stepItem .lineActive1{
		border-bottom: 2px solid #02C6A3  ;
	}
	/* 下面字体颜色 */
	.stepOut .stepItem .stepStatus {
		color: #F05D4B;
		line-height: 36px;
	}
	.stepOut .stepItem .stepStatus1 {
		color: #F29927;
		line-height: 36px;
	}
	.stepOut .stepItem .stepStatus2 {
		color: #02C6A3;
		line-height: 36px;
	}
	.stepOut .stepItem .stepStatus3 {
		color: #999999;
		line-height: 36px;
	}
</style>