element-vue 封装的工作流

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>