TuiPlus基础组件文档

Appearance

On this page

TStepWizard 步骤组件 ​

基础用法 ​

垂直的步骤条 ​

开启简洁风格 ​

TStepWizard 参数配置 ​

1. 简介：基于 Element-plus el-steps el-step 步骤条组件的二次封装，着重于数据层面，HTML 一行代码 ​

TStepWizard 步骤组件 代码示例：

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

2. 配置参数 继承 element-plus el-steps/el-step 提供的属性 ​

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

3. events ​

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