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

一、需求

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

二、最终效果

三、参数配置

1、代码示例

<t-step-wizard
      :stepData="stepData"
      :active="active"
      :successTitle="successTitle"
      @complete="complete"  
      >
        <template #first>第一步骤template>
      .....
  t-step-wizard>
1
2
3
4
5
6
7
8
9

2、配置参数

3、events

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: '注册成功'
        }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

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