<template>
<div class="step-box">
<div v-for="(item,index) in list" :key="index" :class="index + 1 === active ? 'active' : ''">
<span>{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'ArrowStepBar',
props: {
list: {
type: Array,
default: () => ['1、需求导入', '2、生成方案', '3、确定方案', '4、详情设计', '5、料号申请', '6、成果汇总']
},
active: {
type: Number,
required: true,
}
}
}
</script>
<style scoped>
.step-box {
height: 70px;
padding: 10px;
background: #fff;
display: flex;
box-sizing: border-box;
}
.step-box div {
padding: 0 20px;
line-height: 50px;
background: #f2f5f7;
display: inline-block;
position: relative;
margin-right: 40px;
}
.step-box div span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.step-box div::after {
content: '';
display: block;
border-top: 25px solid #f2f5f7;
border-bottom: 25px solid #f2f5f7;
border-left: 25px solid #fff;
position: absolute;
right: -25px;
top: 0;
}
.step-box div::after {
content: '';
display: block;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #f2f5f7;
position: absolute;
right: -25px;
top: 0;
z-index: 10;
}
.step-box div::before {
content: '';
display: block;
border-top: 25px solid #f2f5f7;
border-bottom: 25px solid #f2f5f7;
border-left: 25px solid #fff;
position: absolute;
left: -25px;
top: 0;
}
.step-box div:first-child {
padding: 0 20px 0 40px;
}
.step-box div:first-child::before {
display: none;
}
.step-box div:last-child {
padding: 0 40px 0 20px;
}
.step-box div:last-child::after {
display: none;
}
.step-box .active {
background: #e5f0fc;
color: #0087ff;
}
.step-box .active::after {
border-left-color: #e5f0fc;
}
.step-box .active::before {
border-top-color: #e5f0fc;
border-bottom-color: #e5f0fc;
}
</style>
使用:
<template>
<div id="app">
<ArrowStepBar :active="1" />
</div>
</template>
<script>
export default {
name: 'App',
components: {
ArrowStepBar: () => import('@/components/ArrowStepBar.vue')
}
}
</script>
效果如下: