teachcloud-print-web/src/components/common/StepsProgress/StepsProgress.vue

<template>
  <div class="step-progress">
    <div class="step-menu">
      <el-steps :active="current" align-center process-status="finish">
        <el-step
          v-for="(step, index) in STEPS_LIST"
          :key="index"
          :title="step.title"
        ></el-step>
      </el-steps>
    </div>
    <div class="step-body">
      <component
        :is="currentComponent"
        :ref="currentComponent"
        @on-next="toNext"
        @on-ready="stepReady"
      ></component>
    </div>

    <div class="step-ctrl">
      <el-button type="primary" @click="prevStep" :disabled="isFirstStep"
        >上一步</el-button
      >
      <el-button
        type="primary"
        @click="nextStep"
        :disabled="nextHolder || isLastStep"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import StepOne from "./StepOne";
import StepTwo from "./StepTwo";
import StepThree from "./StepThree";
import StepFour from "./StepFour";

const STEPS_LIST = [
  {
    name: "step-one",
    title: "步骤1"
  },
  {
    name: "step-two",
    title: "步骤2"
  },
  {
    name: "step-three",
    title: "步骤3"
  },
  {
    name: "step-four",
    title: "步骤4"
  }
];

export default {
  name: "step-progress",
  components: {
    StepOne,
    StepTwo,
    StepThree,
    StepFour
  },
  data() {
    return {
      STEPS_LIST,
      current: 0,
      nextHolder: true,
      dataReady: true
    };
  },
  computed: {
    currentComponent() {
      return this.STEPS_LIST[this.current].name;
    },
    isFirstStep() {
      return this.current === 0;
    },
    isLastStep() {
      return this.current === this.lastStep;
    },
    lastStep() {
      return this.STEPS_LIST.length - 1;
    }
  },
  watch: {
    current() {
      // 滚动条置顶
      // document.getElementById("home-body").scrollTop = 0;
    }
  },
  methods: {
    prevStep() {
      if (this.isFirstStep) return;
      this.current -= 1;
    },
    nextStep() {
      if (this.isLastStep || this.nextHolder) return;
      this.$refs[this.currentComponent].checkValid();
    },
    toNext() {
      if (this.isLastStep) return;
      this.current += 1;
      this.nextHolder = true;
    },
    stepReady() {
      this.nextHolder = false;
    }
  }
};
</script>

<style lang="css">
.step-body {
  min-height: 600px;
  padding: 20px;
}
.step-ctrl {
  text-align: center;
  margin-top: 50px;
}
</style>