vue3 ElementUI之Steps 步骤条使用案例（有手就会）

效果图

 

 代码

<template>
  <div class="mod-sys__menu">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step v-for="(item, index) of stepTitle" :key="index" :title="item" :class="stepClassObj(index)" />
    </el-steps>
    <div v-show="active == 0">我是第一步显示的内容</div>
    <div v-show="active == 1">我是第二步显示的内容</div>
    <div v-show="active == 2">我是第二步完成后的内容</div>
    <el-button type="primary" @click="stepSubmitHandle()">下一步</el-button>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, computed } from "vue";
const active = ref(0);
const stepData = reactive({
  stepSuc: [0],
  stepTitle: ["第一步", "第二步"]
});
let stepClassObj = computed((val) => {
  return (val) => {
    return {
      stepSuc: stepData.stepSuc.includes(val),
      stepErr: !stepData.stepSuc.includes(val)
    };
  };
});
const { stepTitle, stepSuc } = toRefs(stepData);
const stepSubmitHandle = () => {
  if (++active.value > 2) active.value = 0;
  // ++active.value;
};
</script>
<style>
.stepSuc:hover {
  cursor: pointer;
}

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

.step_success {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
</style>