VUE中自定义步骤条
下列自定义步骤条是根据elementUI中的el-step的样式改编而得。记录下自己改编过程!!!
<template>
<div class='steps el-steps el-steps--horizontal'>
<div class='el-step is-horizontal'
:class='{isFlex:item.index == stepList.length}'
style='flex-basis:50%;margin-right:0'
:style="{
'flexBasis':(item.index==stepList.length?0:50)+'%',
'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'
}"
v-for="(item,index) in stepList"
:key='index'
>
<div class='el-step__head is-process'>
<div class='el-step__line'>
<i class='el-step__line-inner' style='transition-delay:0ms;border-width:0;width:0%'></i>
</div>
</div>
<div class='textCla'>
<div class='el-step__icon is-text' :class="{success:index<active,before:index>active, active:index==active}" @click="clickStep(index,stepFunction)">
<div class='el-step__icon-inner'><span v-if='index>=active'>{{item.index}}</span><i v-if='index<active' class='el-icon-check'> </i></div>
</div>
<div style='background:#fff;z-index:1;line-height:36px;padding:0 5px' :class="{successText:index<active}">{{item.name}}</div>
</div>
<p class='pTitle'>{{item.title}}</p>
</div>
</div>
</template>
<script>
export default{
methods:{
//点击步骤条后回调
clickStep(index,callback){
if(callback) callback(index)
}
},
props:{
active:{ type : Number,default:1},
stepFunction:{type:Function,default:()=>{}},
stepList:{type:Array, default:()=>[] }
}
}
</script>
<style lang='less' scoped>
.textCla{
display:flex;
align-items: center;
}
.steps{
[class^=el-icon-]{
margin-left:0;
font-weight:700;
color:#4361ec;
}
}
.el-step__icon.is-text{
height:36px;
width:36px;
}
.el-step:last-of-type.isFlex{
flex-basis:auto !important;
flex-shrink:0;
flex-grow:0;
}
.el-step.is-horizontal .el-step__line{
top:18px;
}
.success{
background-color:#dae0fb !important;
color:#fff;
}
.successText{
color:#000;
}
.active{
background-color:#4361ec !important;
color:#fff;
}
.before{
background-color:#f3f3f5;
border-color:#f3f3f5 !important;
span{
color:#9b9b9b;
}
}
.pTitle{
z-index:1;
width:84px;
margin-left:36px;
margin-top:0;
white-space:pre-wrap;
color:#9b9b9b;
font-size:12px;
}
</style>
上诉自定义模板的样式根据自己的需求修改,然后在页面中使用该模板就可以了
下面直接在APP.vue中调用模板
<template>
<div id="app">
<div >
<Echartsword ></Echartsword>
</div>
<ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep>
<el-button @click="submit">提交</el-button>
</div>
</template>
<script>
import ElStep from './components/elStep.vue'
export default {
name: 'App',
data(){
return {
val:'',
active:0,
stepList:[
{name:'aaa',index:1,title:'aaa的title信息'},
{name:'bbb',index:2,title:'bbb的title信息'},
{name:'ccc',index:3,title:'ccc的title信息'},
]
}
},
components: {
HelloWorld,
Hello,
Echartsword,
ElStep
},methods:{
inputVal(val){
this.val = val
},
submit(){
console.log(this.val)
},stepFunction(index){
this.active = index
this.goStep(this.active)
},goStep(){
}
}
}
</script>
效果如下图: