step-nav 步骤导航栏（齐思博）

基础用法

步骤导航栏

<template>
  <div>
    <h-step-nav
      :stepList="stepList"
      :stepNum="stepNum"
      @change="fnChangeStep"
    ></h-step-nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stepList: [
        {
          name: '步骤一',
          value: 'first-step'
        },
        {
          name: '步骤二',
          value: 'second-step'
        },
        {
          name: '步骤三',
          value: 'third-step'
        },
        {
          name: '步骤四',
          value: 'fourth-step'
        },
        {
          name: '步骤五',
          value: 'fifth-step',
          disabled: true
        },
      ],
      stepNum: 0,
    }
  },
  methods: {
    fnChangeStep(num) {
      this.stepNum = num;
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
stepList	步骤数据列表	array	—	—
stepNum	当前选中步骤数（从0开始表示第一步）	number	—	0

list

参数	说明	类型	可选值	默认值
name	步骤名称	string	—	—
disabled	是否禁用	boolean	true/false	false

Events

方法名	说明	参数
change	步骤点击时触发（禁用窗台不触发）	选项值