vue+element-ui的el-steps组件二次封装（步骤组件）

一、需求

项目中时常会遇到这种需求，某些数据需要前面的数据通过后才能输入的情况（即先要验证第一步才能进入第二步）——如：企业司机注册（先输入基本信息在验证驾驶证行驶证这些等)；因此封装了步骤组件

二、最终效果

三、参数配置

1、代码示例

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

2、配置参数

参数	说明	类型	默认值
stepData	步骤数据源	Array	-
—id	步骤 ID 唯一	Number	-
—title	步骤头文字展示	String	-
—slotName	每个步骤的具名 slot	String	-
—icon	步骤头icon展示（element内置icon）	String	-
—description	步骤头描述	String	-
—btnArr	每个步骤的按钮	Array	-
----- btnTitle	按钮文字信息	String	-
----- params	每个按钮传参信息（可以随意定义字段)	String/Number	-
----- fn	按钮事件	function	-
isShowLastSuccess	是否显示默认 icon 最后一步	Boolean	el-icon-success
active	设置当前激活步骤	Number	0
—lastBtnArr	最后一步按钮需要多个	Array	-
----- btnTitle	按钮文字信息	String	-
----- params	每个按钮传参信息（可以随意定义字段)	String/Number	-
----- fn	按钮事件	function	-
lastBtnTitle	最后一步骤成功按钮文字	String	完成
successTitle	最后一步骤成功提示语	String	-

3、events

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

4、使用帮助

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,默认参数是当前对象内容

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

基于ElementUi&Antd再次封装基础组件文档