vue-element-ui 步骤条Steps限制已成功的步骤进行点击跳转

最近工作中使用到了element-ui中steps组件，需求是:

1. 步骤（数量）会因为某些条件进行变化
2. 对于已通过的步骤可以点击步骤进行跳转
3. 对于未通过的步骤鼠标要有禁止的提示

因为原本组件是没有这些功能的，所以要自己对step进行优化。因为某个步骤下是分四个人做，所以步骤内容是以组件的形式分开

上代码

<template>
  <div class="main">
    <el-steps :active="active" finish-status="success">
      <el-step
        v-for="(item,index) of stepTitle"
        :key="index"
        :title="item"
        :class="stepClassObj(index)"
        @click.native="handleStep(index)"
      />
    </el-steps>
    <!-- 内容展示区 -->
    <step-content1
      v-show="active === 0 "
      @handleNextStep="handleNextStep()"
    />
    <step-content2
      v-show="active === 1 "
      @handleLastStep="handleLastStep()"
      @handleNextStep="handleNextStep()"
    />
    <step-content3
      v-show="active === 2 "
      @handleLastStep="handleLastStep()"
      @handleNextStep="handleNextStep()"
    />
    <step-content4
      v-show="active === 3 "
      @handleLastStep="handleLastStep()"
    />
  </div>
</template>

第一个需求步骤数量变化只需通过v-show和active来控制就好了，不多赘述。
主要是第二个和第三个需求，官方文档是没有提供步骤点击事件，所以用原生点击@click.native="handleStep(index)"。接下来是对已成功的步骤才可以点击，未成功的步骤不允许点击。

上代码

data() {
    return {
      // 步骤
      active: 0,
      // 已选步骤
      stepSuc: [0],
      // 步骤标题
      stepTitle: ['步骤一', '步骤二', '步骤三', '步骤四']
    }
  },
methods: {
    // 点击步骤条
    handleStep(val) {
      if (this.stepSuc.includes(val) === true) {
        this.active = val
      }
    },
    // 组件点击上一步
    handleLastStep() {
      if (--this.active === 0) { this.active = 0 }
    },
    // 组件点击下一步
    handleNextStep() {
      this.stepSuc.push(++this.active)
    }
  }

在内容组件点击下一步的时候将下一步的active值存入已成功步骤数组stepSuc[]中，点击步骤条的时候通过includes()方法去判断是否存在。若存在则意味着已成功的步骤，可以点击。

接下来完成了点击事件之后，用户体验是不好的。因为鼠标移动到步骤条上时没有点击提示或者不允许点击提示。这时要用到动态样式

上代码

computed: {
    // 动态给步骤加样式
    stepClassObj(val) {
      return (val) => {
        return {
          stepSuc: this.stepSuc.includes(val),
          stepErr: !this.stepSuc.includes(val)
        }
      }
    }
  }

css部分

.stepSuc :hover{
  cursor: pointer;
}
.stepErr :hover{
  cursor: not-allowed;
}

适用动态给每个step添加class来实现鼠标提示:class="stepClassObj(index)"，在计算属性中去判断index是否在已成功的步骤数组中。

至此，step的优化就解决了。

详细的代码可以去我的Github主页看，一直更新工作中遇到的问题，希望有大神与我交流更好的改进方法。
https://github.com/Matoutou/element-ui-user