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-showactive来控制就好了,不多赘述。
主要是第二个和第三个需求,官方文档是没有提供步骤点击事件,所以用原生点击@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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值