效果
写一个步骤条 直接上代码 直接使用就可
- 使用
<template>
<div>
<zl-step
:active.sync="active" :stepArr="stepArr"
:width="width"
></zl-step>
<el-button @click="active--">上一步</el-button>
<el-button @click="active++">下一步</el-button>
</div>
</template>
<script>
export default {
data() {
return {
width:'200px',
active:1,
stepArr:[
{title:'步骤1'},
{title:'步骤2'},
{title:'步骤3'},
{title:'步骤4'},
]
};
},
created(){
},
methods:{
}
};
</script>
- 组件代码
<template>
<ul class="zl-step" >
<li
:class="{cur:active>=index}"
v-for="(item,index) in stepArr"
:style="{
width:width,
color:active>=index?color||'#fff':'#666',
'background':active>=index?background||'#66B1FF':'#d7d8da'
}"
:key="index"
>
<span>{{item.title}}</span>
<div
v-if="index<stepArr.length-1"
:class="active>=index?'jiaoActive':'jiao'"
:style="{
color:active>=index?color||'#fff':'#666',
'border-left-color':active>=index?background||'#66B1FF':'#d7d8da'
}"
></div>
<div class="interval"></div>
</li>
</ul>
</template>
<script>
export default {
name: 'ZlStep',
props: {
active: {
type: Number,
default: 0
},
stepArr: {
type: Array,
default: () => []
},
width: {
type: String,
default: '100%'
},
background: {
type: String,
default: '#66B1FF'
},
color: {
type: String,
default: '#fff'
},
height: {
type: String,
default: '40px'
}
},
watch: {
active (a) {
if (a <= 0) {
this.$emit('update:active', 0);
console.log('已经是最小值了' + a);
}
if (a > this.stepArr.length - 1) {
this.$emit('update:active', this.stepArr.length - 1);
console.log('已经是最大值了' + a);
}
}
},
data () {
return {
};
}
};
</script>
<style scoped >
.zl-step{
list-style: none;
font-size: 14px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
}
li{
height: 40px;
background: #d7d8da;
color:#666;
text-align: center;
line-height: 40px;
font-weight: 500;
/*width: 20%;*/
/*flex-basis: 100%;*/
position: relative;
}
/*三角形绘制*/
.jiao{
width: 0;
height: 0;
border-top: 20px solid transparent;/*高度一半*/
border-left: 20px solid #d7d8da; /*调整宽度*/
border-bottom: 20px solid transparent;/*高度一半*/
position: absolute;
right:-20px;/*跟宽度保持一致*/
top:0;
z-index: 9999;
}
.jiaoActive{
width: 0;
height: 0;
border-top: 20px solid transparent;/*高度一半*/
border-left: 20px solid #E8514A; /*调整宽度*/
border-bottom: 20px solid transparent;/*高度一半*/
position: absolute;
right:-20px;/*跟宽度保持一致*/
top:0;
z-index: 2;
}
/*大3个px的边 26-20/2*/
.interval{
width: 0;
height: 0;
border-top: 26px solid transparent;/*高度一半*/
border-left: 26px solid #fff; /*调整宽度*/
border-bottom: 26px solid transparent;/*高度一半*/
position: absolute;
right:-26px;/*跟宽度保持一致*/
top:-6px;
z-index: 1;
}
</style>