# 步骤组件

1 创建账户

2 填写基础信息

3 填写用户信息

4 注册成功

第一步

<template>
  <div style="width:100%;">
    <t-step-wizard
      style="min-height:400px;"
      :stepData="stepData"
      :lastBtnTitle="lastBtnTitle"
      :active="active"
      :successTitle="successTitle"
      @complete="complete"
    >
      <template #first>第一步</template>
      <template #second>第二步骤</template>
      <template #third>第三步骤</template>
    </t-step-wizard>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      stepData: [
        {
          id: 1,
          title: '创建账户',
          slotName: 'first',
          btnArr: [
            {
              btnTitle: '下一步',
              params: 1,
              fn: this.next
            }
          ]
        },
        {
          id: 2,
          title: '填写基础信息',
          slotName: 'second',
          btnArr: [
            {
              btnTitle: '上一步',
              params: 2,
              fn: this.back
            },
            {
              btnTitle: '下一步',
              params: 2,
              fn: this.next
            }
          ]
        },
        {
          id: 3,
          title: '填写用户信息',
          slotName: 'third',
          btnArr: [
            {
              btnTitle: '上一步',
              params: 3,
              fn: this.back
            },
            {
              btnTitle: '下一步',
              params: 3,
              fn: this.next
            }
          ]
        },
        {
          id: 4,
          title: '注册成功',
          lastBtnArr: [
            {
              btnTitle: '上一步',
              params: 4,
              fn: this.back
            },
            {
              btnTitle: '下一步',
              params: 4,
              fn: this.next
            }
          ]
        }
      ],
      lastBtnTitle: '提交资料',
      successTitle: '企业信息填写完成，等待提交认证资料，经*****平台审核通过后即可办理业务'
    }
  },
  methods: {
    // 下一步
    next (val) {
      switch (val.params) {
        case 1:
          this.active += 1
          break
        case 2:
          this.active += 1
          break
        case 3:
          this.active += 2
          break
        case 4:
          console.log(22222222222)
          break
      }
    },
    // 上一步
    back (val) {
      switch (val.params) {
        case 2:
          this.active -= 1
          break
        case 3:
          this.active -= 1
          break
        case 4:
          console.log(111111111)
          break
      }
    },
    // 完成
    complete () {
      this.active = 0
    }
  }
}
</script>

# TStepWizard 参数配置

# 1. 简介

步骤组件 代码示例：

    <t-step-wizard
            :stepData="stepData"
            :lastBtnTitle="lastBtnTitle"
            :active="active"
            :successTitle="successTitle"
            @complete="complete"
          >
           <template #first>第一步骤</template>
          .....
          </t-step-wizard>

# 2. events 其他事件按照 el-steps/el-step 直接使用

事件名	说明	返回值
complete	最后一步按钮点击事件	当前步骤值

# 3. 配置参数

参数	说明	类型	是否必须
stepData	步骤数据源	Array	是
---id	步骤 ID 唯一	Number	是
---title	步骤头文字展示	String	是
---slotName	每个步骤的具名 slot	String	是
---btnArr	每个步骤的按钮	Array	是
----- btnTitle	按钮文字信息	String	是
----- params	每个按钮传参信息（不一定为 params)	String/Number	否
----- fn	按钮事件	function	是
isShowLastSuccess	是否显示默认 icon 最后一步	Boolean	否
active	设置当前激活步骤	Number	是
---lastBtnArr	最后一步按钮需要多个	Array	是
----- btnTitle	按钮文字信息	String	是
----- params	每个按钮传参信息（不一定为 params)	String/Number	否
----- fn	按钮事件	function	是
lastBtnTitle	最后一步骤成功按钮文字	String	否
successTitle	最后一步骤成功提示语	String	是

# 4. 使用帮助

js 代码

stepData: [
        {
          id: 1,
          title: '创建账户',
          slotName: 'first',
          btnArr: [
            {
              btnTitle: '下一步',
              params: 1,
              fn: this.next
            }
          ]
        },
        {
          id: 2,
          title: '填写基础信息',
          slotName: 'second',
          btnArr: [
            {
              btnTitle: '上一步',
              params: 2,
              fn: this.back
            },
            {
              btnTitle: '下一步',
              params: 2,
              fn: this.next
            }
          ]
        },
        {
          id: 3,
          title: '填写用户信息',
          slotName: 'third',
          btnArr: [
            {
              btnTitle: '上一步',
              params: 3,
              fn: this.back
            },
            {
              btnTitle: '下一步',
              params: 3,
              fn: this.next
            }
          ]
        },
        {
          id: 4,
          title: '注册成功'
        }
  ]

注意:（以上表示） 当前有 4 个步骤，其标题分别为： 1、创建账户 2、填写基础信息 3、填写用户信息 4、注册成功解析第一步：（其它步骤都如此）其内容放在 slot 为 first 中；有一个按钮为“下一步”，其事件是 next,默认参数是当前对象内容具体 js 代码如下：

 methods: {
    // 下一步
    next (val) { // val就是当前对象
      console.log(55, val)
      console.log(66, val.params)
      switch (val.params) {
        case 1:
          this.active += 1
          break
        case 2:
          this.active += 1
          break
        case 3:
          this.active += 2
          break
      }
    }
  }

# 5. 关于 elementUi el-steps/el-step 提供的一些方法和属性，样式如何添加

按照 el-steps/el-step 写法直接使用即可，无需其它配置

← 具体页面布局组件日期组件 →