仿照elementUI写个步骤条

以下是一个简化版的步骤条组件的实现，它模仿了Element UI的步骤条组件的基本功能。

<template>
  <div class="el-steps">
    <div class="el-steps__header">
      <div class="el-steps__item" :class="{ 'is-active': step.active, 'is-process': step.process, 'is-finish': step.finish }" v-for="(step, index) in steps" :key="index">
        <div class="el-steps__line" :style="{ width: steps.length > 1 ? `${100 / (steps.length - 1)}%` : '0' }"></div>
        <span class="el-steps__icon">
          <i v-if="step.active || step.process" class="el-icon-check"></i>
          <i v-else-if="step.finish" class="el-icon-check"></i>
          <i v-else>{{ index + 1 }}</i>
        </span>
        <span class="el-steps__title">{{ step.title }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'ElSteps',
  props: {
    active: Number,
    finishStatus: {
      type: String,
      default: 'process'
    }
  },
  data() {
    return {
      steps: []
    };
  },
  created() {
    this.$on('el.step.add', (step) => {
      this.steps.push(step);
    });
  },
  watch: {
    active(newVal, oldVal) {
      this.steps.forEach((step, index) => {
        step.active = false;
        step.finish = false;
        step.process = false;
        if (newVal > oldVal) {
          if (index === newVal - 1) {
            step.process = true;
          } else if (index < newVal) {
            step.finish = true;
          }
        } else {
          step.active = index === newVal;
        }
      });
    }
  }
};
</script>
 
<style scoped>
.el-steps {
  display: flex;
  align-items: center;
  width: 100%;
}
 
.el-steps__header {
  display: flex;
  align-items: center;
}
 
.el-steps__item {
  position: relative;
  flex: 1;
  text-align: center;
}
 
.el-steps__line {
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #e5e5e5;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
 
.el-steps__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background-color: #fff;
  position: relative;
  z-in