ant-design-vue/components/vc-steps/demo/nextStep.vue

<script>
import Steps, { Step } from '../index';
import '../assets/index.less';
import '../assets/iconfont.less';

function generateRandomSteps() {
  const n = Math.floor(Math.random() * 3) + 3;
  const arr = [];
  for (let i = 0; i < n; i++) {
    arr.push({
      title: `步骤${i + 1}`,
    });
  }
  return arr;
}
const steps = generateRandomSteps();
export default {
  data() {
    return {
      currentStep: Math.floor(Math.random() * steps.length),
    };
  },
  methods: {
    nextStep() {
      let s = this.currentStep + 1;
      if (s === steps.length) {
        s = 0;
      }
      this.currentStep = s;
    },
  },
  render() {
    const cs = this.currentStep;
    return (
      <form class="my-step-form">
        <div>这个demo随机生成3~6个步骤，初始随机进行到其中一个步骤</div>
        <div>当前正在执行第{cs + 1}步</div>
        <div class="my-step-container">
          <Steps current={cs}>
            {steps.map((s, i) => {
              return <Step key={i} title={s.title} />;
            })}
          </Steps>
        </div>

        <div>
          <button type="button" onClick={this.nextStep}>
            下一步
          </button>
        </div>
      </form>
    );
  },
};
</script>
<style>
.my-step-form {
  width: 100%;
}
.my-step-form > div {
  margin-bottom: 20px;
}
.my-step-container {
  width: 100%;
}
</style>