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>