Step 步骤条

基础用法

<template>
  <div>
    <plv-step :active="stepACurrent">
      <plv-step-item title="确认订单" />
      <plv-step-item title="确认付款" />
      <plv-step-item title="完成订购" />
      <plv-step-item title="完成订购22" />
      <plv-step-item title="完成订购55" />
    </plv-step>

    <br/>
    <!-- 自定义状态 -->
    <plv-step :active="stepBCurrent" :finishStatus="stepBFinishStatus" :waitStatus="stepBWaitStatus" :processStatus="stepBProcessStatus" >
      <plv-step-item title="确认订单" />
      <plv-step-item title="确认付款" />
      <plv-step-item title="完成订购" status="wait" />
      <plv-step-item title="完成订购22" />
      <plv-step-item title="完成订购55" />
    </plv-step>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stepACurrent: 0,
        
        stepBCurrent: 2,
        stepBFinishStatus: 'process',
        stepBWaitStatus: 'process',
        stepBProcessStatus: 'process',
      };
    }
  };
</script>

显示代码

Step 参数

参数	说明	类型	可选值	默认值
active	当前激活步骤	Number	-	0
finish-status	完成状态样式	String	wait process finish	finish
process-status	进行中状态样式	String	wait process finish	process
wait-status	等待状态样式	String	wait process finish	wait

Step 事件

事件名称	说明	回调参数
change	步骤改变时触发	active 当前步骤索引

StepItem 参数

参数	说明	类型	可选值	默认值
title	自定义标题内容	String	-	-
status	自定义状态, 会覆盖step的status	String	wait process finish	-