element-ui 步骤条的使用(转)

由于项目中有用到步骤条，在这个过程中，也遇到了坑，可能还是自己能力不足。。。纠结好久

<el-steps :space="200" :active="1" finish-status="success" align-center>
  <el-step title="已完成"></el-step>
  <el-step title="进行中"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>
 element-ui中步骤条的基本使用方法如上图所示，更加具体的可以去element-ui的官网查看。由于页面要兼容不同屏幕宽度，所以在项目中设置了space的值为20%，居中样式看着可能更好一点。但是它也存在一个问题，是不支持英文字母自动换行的，所以得自己手动设置word-break: break-all

现在来说一下项目中的要求： 

除了title和description的展示，下面还增加了时间和原因的展示.....

因为这个组件只有title和description两个属性，所以下面时间的展示和原因就有点困难了，还得对应到当前的步骤。我的解决办法就是去找步骤的源码，仿照源码又写了一个组件,其中一部分都是本来组件都有的直接拿来用了

<template>
    <div class="el-step is-horizontal is-center" :style="style"> 
       <slot></slot>
    </div>
</template>
 
<script>
export default {
  name: "SubSteps",
  data() {
    return {};
  },
  computed: {
    space() {
      const { isSimple, $parent: { space } } = this;
      return isSimple ? "" : space;
    },
    style: function() {
      const style = {};
      const parent = this.$parent;
      const len = parent.steps.length;
 
      const space =
        typeof this.space === "number"
          ? this.space + "px"
          : this.space
            ? this.space
            : 100 / (len - (this.isCenter ? 0 : 1)) + "%";
      style.flexBasis = space;
      if (this.isVertical) return style;
      if (this.isLast) {
        style.maxWidth = 100 / this.stepsCount + "%";
      } else {
        style.marginRight = -this.$parent.stepOffset + "px";
      }
      return style;
    }
  }
};
</script>
 
<style scoped>
.box-container-body {
  padding: 24px;
  background: #fff;
}
.is-center {
    text-align: center;
    font-size: 12px;
    white-space: normal;
}
</style>
 使用方法如下：

<el-steps  v-model="info.auditingDetail" space="20%" :active="idx" align-center>
    <sub-steps v-for="(item,index) in info.auditingDetail" 
        :key="index" 
        class="detail">{{item.auditingTime}}
        </sub-steps>
</el-steps>
 
--------------------- 
作者：栗子萌萌哒 
来源：CSDN 
原文：https://blog.csdn.net/nannanmengmengda/article/details/83622510 
版权声明：本文为博主原创文章，转载请附上博文链接！