vue自己手写的步骤条组件

vue自己手写的步骤条组件，市面上的都不喜欢，满足不了功能，自己手写了个

效果

代码

<!-- 步骤条组件 -->
<template>
  <div style="
  width: 100%;
  display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;">

    <div :class="singleDivClass(index , item)"
         @click="clickProgress(index, item)"
         v-for="(item,index) in progressList">{{ item.name }}

      <!-- 箭头-->
      <div v-if="progressList.length - 1 !== index"
           style="display: inline-block;position: absolute;right: -25px;height: 40px;width: 40px; z-index: 10">
        <div style="width: 25px;height: 20px;background-color: white;transform: skewX(30deg);"></div>
        <div style="width: 25px;height: 20px;background-color: white;transform: skewX(-30deg);"></div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  props: {
    progressList: {
      type: Array,
      default: [{
        name: '',  // 节点名称
        passed: true, // 是否通过，不通过的不让点
        checked: false // 是否当前节点
      }]
    },
  },
  name: "myProgressBar",
  components: {},
  data () {
    return {}
  },
  mounted () {
  },
  created () {
  },
  methods: {
    // 点击流程
    clickProgress (index, item) {

      if (!item.passed) {
        this.$message.info("请先处理上一步内容")
        return;
      }

      for (let i = 0; i < this.progressList.length; i++) {
        if (i === index) {
          this.$set(this.progressList[i], 'checked', true)
        } else {
          this.$set(this.progressList[i], 'checked', false)
        }
      }

      // 点击事件
      this.$emit('clickItem', index, item);

    },
    singleDivClass (index, item) {

      let resultClass;

      if (index === 0) {
        resultClass = 'left-redis-class'
      } else if (this.progressList.length - 1 === index) {
        resultClass = 'right-redis-class '
      }

      if (item.checked) {
        resultClass += '  single-div-class-checked';
      } else {
        resultClass += '  single-div-class';

        if (item.passed) {
          resultClass += '  single-div-background';
        } else {
          resultClass += ' single-div-background-disable';
        }

      }

      return resultClass;

    }

  },
  watch: {},
  computed: {}
}
</script>

<style lang="scss" scoped>

.left-redis-class {
  border-radius: 20px 0 0 20px;
}

.right-redis-class {
  border-radius: 0 20px 20px 0;
}


.single-div-background {
  background-color: #E6EEFA;
  cursor: pointer;

  &:hover {
    background-color: #d5e0f3;
  }
}

.single-div-background-disable {
  cursor: not-allowed;
  background-color: #e7e7e7;
}

.single-div-class {
  color: #0077CC;
  position: relative;
  flex: 1;
  height: 40px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.single-div-class-checked {
  color: #E6EEFA;
  position: relative;
  background-color: #0077CC;
  flex: 1;
  height: 40px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

</style>

   <div style="padding: 20px;">
      <my-progress-bar
        :progressList="progressList"
        @clickItem="clickItem"></my-progress-bar> </div>```