element-vue 封装的工作流
<template>
<div style="margin:50px;">
<el-steps :active="active">
<el-step title="步骤 1" :icon="active==0 ? 'el-icon-user-solid' : 'el-icon-circle-check'"></el-step>
<el-step title="步骤 2" :icon="active==1 ? 'el-icon-user-solid' : 'el-icon-circle-check'"></el-step>
<el-step title="步骤 3" :icon="active==2 ? 'el-icon-user-solid' : 'el-icon-circle-check'"></el-step>
</el-steps>
<!-- el-icon-circle-check -->
<div>
<div v-for="(item,index) in data" :key="index" class="steps">
<span class="title">
<i class="el-icon-user stepIcon stepIconBgc" v-if="item.active && !item.hisActive" />
<i class="el-icon-check stepIcon " v-if="!item.active" />
<i class="el-icon-check stepIcon stepIconBgc1" v-if="item.active && item.hisActive" />
<span class="titleName">
<div :style="item.active ? 'color: #448ef7':''" class="t1">{{item.name}}</div>
<div class="t2">审批人员:{{item.name1}}</div>
</span>
</span>
<span class="boxLine" v-if="index != data.length-1">
<span class="lineTime">0天0时0分44秒</span>
<span class="line"></span>
</span>
</div>
</div>
<el-button style="margin-top: 100px;" @click="next">下一步</el-button>
</div>
</template>
<script>
export default {
data() {
return {
data: [{
name: '计划室经理',
name1: '林xx',
active: true,
hisActive: false
}, {
name: '计划室经理',
name1: '林xx',
active: false,
hisActive: false
}, {
name: '计划室经理',
name1: '林xx',
active: false,
hisActive: false
}],
active: 0
};
},
methods: {
next() {
this.active++
if (this.active >= this.data.length + 1) {
return
}
if (this.active > this.data.length - 1) {
this.data[this.active - 1].hisActive = true
return
};
this.data[this.active].active = true
this.data[this.active - 1].hisActive = true
}
}
}
</script>
<style lang="sass">
.steps
display: inline-block
height: 50px
line-height: 25px
.title
display: inline-block
height: 50px
.stepIcon
font-size: 24px
border-radius: 50%
padding: 5px
border: 1px solid #000
.stepIconBgc
border: 1px solid #448ef7
background: #448ef7
color: #fff
.stepIconBgc1
border: 1px solid #448ef7
color: green
.titleName
display: inline-block
width: 110px
height: 50px
position: relative
font-size: 20px
margin-left: 10px
.t1
width: 100%
position: absolute
left: 0
top: 25px
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.t2
position: absolute
left: 0
top: 60px
font-size: 14px
.boxLine
position: relative
vertical-align: middle
display: inline-block
width: 200px
height: 50px
margin: -5px 10px 0
.lineTime
position: absolute
top: 0
left: 50px
.line
position: absolute
top: 25px
left: 0px
width: 200px
height: 1px
border: 1px solid #448ef7
</style>