vue步骤条组件，流程显示组件

先放个效果图

要求是要在列表里面显示当前的流程状态如何，找了半天没找到合适的组件，就自己写了一个，如果有需要可以直接拿来用，我自己调试了半天才调试好样式，大家看看有没有要该的地方，不太会写前端
下面展示一些 内联代码片。

<template>
  <div class="status">
    <ul>
      <li
        v-for="(item,index) in data"
        :class="steps*2===index?'current':steps*2>index?'finish':'wait'"
      >
        <div v-if="item===''" class="arrows"><i class='icon'></i></div>
        <div v-else-if="item.length<=2" class="show">{{ item }}</div>
        <el-tooltip v-else class="item" effect="dark">
          <div slot="content"> {{ item }}</div>
          <div class="show"> {{ item }}</div>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  props: {
    setData: Array,
    steps: Number,
  },
  created() {
    this.forr();
  },
  data() {
    return {
      data: []
    }
  },
  methods: {
    forr() {
      this.data = []
      for (let i = 0; i < this.setData.length; i++) {
        if (i > 0) {
          this.data.push('')
        }
        this.data.push(this.setData[i]);
      }
    }
  },
}
</script>

<style scoped>
.status {
  width: 400px;
  *text-align: center;
}

ul {
  margin: 0;
  overflow: hidden;
  zoom: 1;
  padding: 0;
  height: 31px;
}

li {
  height: 30px;
  float: left;
  display: inline;
  font-size: 12px;
  line-height: 0px;
  margin: 0px 0px 0px 0px;
}

.show {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  height: 30px;
  width: 30px;
  Line-height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
/*箭头图标*/
.icon{
  display: inline-block;
  width: 20px;
  height: 30px;
  background-image: url("img/arrows.png");/* 需要在本地下载一个图片引入，可去阿里图标库寻找*/
  background-position: center center;
  background-size: 25px 25px;
  background-repeat: no-repeat;
}
/*当前步骤背景色*/
.current .show {
  background: #4b8aff;
}
/*已完成步骤背景色*/
.finish .show {
  background: #24c646;
}
/*未开始步骤背景色*/
.wait .show {
  background: #b8bbbd;
}
</style

使用方法

调用组件传入，每一步的名称和当前是多少步

调用组件并传参

参数

我是写在列表中的，附上代码：

 <testStatus :steps="status" :set-data="SetData" />

 status:2,
 SetData:["第一", "第二", "第三", "第四步骤", "五","马上结束","结束","收尾"]

只需要传入两个参数就可以使组件生效，
组件里面没有加判断方法，请按照常规逻辑传值
只能显示两个字符，如果超出会被隐藏，鼠标放上去显示全称