@wocwin/t-ui/packages/step-wizard/src/README.md

Vue 中基于Element-ui二次封装基础组件文档

#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        | 是    |
| 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写法直接使用即可，无需其它配置