话不多说直接上组件代码
组件 Steps.vue
css
<style lang="less" scoped>
.step01, .step02, .step03, .step04, .step05, .step06{
width: 20px;
height: 20px;
background-size: 100% 100%;
display: inline-block;
}
.step01{
background-image: url("../assets/image/Steps/Steps5.png");
}
.step02{
background-image: url("../assets/image/Steps/Steps6.png");
}
.step03{
background-image: url("../assets/image/Steps/Steps1.png");
}
.step04{
background-image: url("../assets/image/Steps/Steps2.png");
}
.step05{
background-image: url("../assets/image/Steps/Steps4.png");
}
.step06{
background-image: url("../assets/image/Steps/Steps3.png");
}
.li_active {
.step01{
background-image: url("../assets/image/Steps/StepsActive5.png");
}
.step02{
background-image: url("../assets/image/Steps/StepsActive6.png");
}
.step03{
background-image: url("../assets/image/Steps/StepsActive1.png");
}
.step04{
background-image: url("../assets/image/Steps/StepsActive2.png");
}
.step05{
background-image: url("../assets/image/Steps/StepsActive4.png");
}
.step06{
background-image: url("../assets/image/Steps/StepsActive3.png");
}
}
.steps {
position: relative;
}
.steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 15%;
position: relative;
float: left;
height: 66px;
p{
width: 35px;
height: 35px;
border: 1px solid rgba(216,216,216,1);
border-radius: 50%;
line-height: 43px;
position: absolute;
top: 0;
left: 20px;
background-color: #fff;
}
.text{
position: absolute;
bottom: 0;
left: 20px;
}
.li_active{
border-color: rgba(41,156,245,1);
color: rgba(41,156,245,1);
}
}
.steps li ~ li:after {
content: "";
width: 100%;
height: 2px;
border: 1px solid rgba(41,156,245,1);
background-color: #fff;
position: absolute;
left: -50%;
top: 15px;
z-index: -1;
}
.steps li.active:before,
.steps li.active:after {
border: 1px solid rgba(41,156,245,1);
background-color: #fff;
}
.steps li.active ~ li:before,
.steps li.active ~ li:after {
border: 1px solid rgba(216,216,216,1);
background-color: #fff;
}
</style>
html
<template>
<div>
<ul class="steps">
<li
v-for="(item,index) in SetData"
:key="index"
:class="{'active':Steps-1===index}"
>
<p :class="{'li_active':Steps>index}">
<i :class="item.icon"></i>
</p>
<div class="text" :class="{'li_active':Steps>index}">
{{item.title}}
</div>
</li>
</ul>
</div>
</template>
js
<script>
export default {
name:'Steps',
props:{
Steps:{
type:Number,
default:1
},
},
data() {
return {
SetData : [
{
title:'已立案',
icon:'step01'
},
{
title:'已立案',
icon:'step02'
},
{
title:'已立案',
icon:'step03'
},
{
title:'已立案',
icon:'step04'
},
{
title:'已立案',
icon:'step05'
},
{
title:'已立案',
icon:'step06'
},
],
}
},
watch: {},
mounted() {},
computed: {},
components: {},
methods: {
},
}
</script>
实现效果