12.steps步骤条组件封装与调用

现成的ui组件也有封装好的步骤条，但是因为公司对现成的步骤条样式不是很满意，再者，现成的步骤条不能满足开发需求，只能自己动手封装了一个。

源码放在了个人的码云仓库上：gitee.com/mayxue/vue2…

1.效果：

• 第一种是比较常规的步骤条； 2.常规步骤条封装的组件代码：

2.1 template代码：

<template>
  <!-- Steps 步骤条-组件 -->
  <div class="formStep">
    <div v-for="(item,index) in stepData" v-bind:key="index">
      <div
        :class="((stepActive-1 > index ?'stepItemSuccess stepItem':(stepActive-1 == index ? 'stepItemActive stepItem':'stepItem')))"
      >
        <div class="stepIndex">
          <span v-if="stepActive-1 <= index">{{index+1}}</span>
          <img src="./images/successIco.png" v-if="stepActive-1 > index" />
        </div>
        <div class="stepStatus stepName">{{item.status}}</div>
      </div>
    </div>
    <div class="stepLine" :style="{width:(stepData.length-1)*160+'px'}"></div>
    <div
      class="stepActiveLine"
      :style="{width:stepActive > stepData.length ? (stepData.length-1)*160+'px':(stepActive-1)*160+'px'}"
    ></div>
  </div>
</template>

2.2：script：

<script>
export default {
  name: "formStep",
  props: {
    stepData: {
      type: Array
    },
    stepActive: {
      default: 1
    }
  },
};
</script>

2.3样式文件：

<style scoped lang="scss" >
.formStep {
  display: flex;
  position: relative;
  margin-bottom: 10px;
  .stepLine {
    height: 4px;
    width: 100%;
    background: #d7d7d7;
    position: absolute;
    top: 14.5px;
    margin: 0 80px;
  }
  .stepActiveLine {
    height: 4px;
    width: 100%;
    background: #017f5a;
    position: absolute;
    top: 14.5px;
    margin: 0 80px;
    z-index: 5;
  }
  .stepItem {
    width: 160px;
    position: relative;
    z-index: 10;
    .stepName {
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #8b8b8b;
    }
    .stepIndex {
      width: 27px;
      height: 27px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      background: #8b8b8b;
      border-radius: 50%;
      border: 5px solid #e8e8e8;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
  }
}
.formStep .stepItemSuccess.stepItem .stepName {
  color: #181818;
}
.formStep .stepItemSuccess.stepItem .stepIndex {
  background: #017f5a;
  border: 5px solid #cce5de;
}
.formStep .stepItemActive.stepItem .stepName {
  color: #ff852b;
}
.formStep .stepItemActive.stepItem .stepIndex {
  background: #ff852b;
  border: 5px solid #ffe7d5;
}
.formStep .stepItemError.stepItem .stepName {
  color: #f00000;
}
.formStep .stepItemError.stepItem .stepIndex {
  background: #f00000;
  border: 5px solid #fccccc;
}
</style>

2.4在页面中的调用：

<template>
  <div class="step">
    <el-card :body-style="{ padding: '20px', minHeight: 'calc(100vh - 100px)' }">
      <!-- 常规进度条-start -->
      <formStep :stepData="stepData" :stepActive="stepActive"></formStep>
      <!-- 常规进度条-end -->
    </el-card>
  </div>
</template>
<script>
import { formStep } from "@/components/index";
export default {
  name: "step",
  components: {
    formStep
  },
  data() {
    return {
      //常规进度条
      stepActive: 1, //当前进度
      stepData: [
        {
          status: "基本信息"
        },
        {
          status: "补充订单信息"
        },
        {
          status: "确认提交"
        }
      ],
  },
};
</script>

• 第二种是根据状态来动态改变的步骤条，这部分就不列出来了，原理差不多，源代码在码云上：gitee.com/mayxue/vue2…