Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步。

基础示例：

多样

组件多样化，让你减少开发UI烦恼

基于Vue

基于Vue，生态圈更强大。

效率

简单配置，立即生效，缩短开发周期。

<lee-steps :active="active" color="#46bd87">
    <lee-step title="多样">组件多样化，让你减少开发UI烦恼</lee-step>
    <lee-step title="基于Vue">基于Vue，生态圈更强大。</lee-step>
    <lee-step title="效率">简单配置，立即生效，缩短开发周期。</lee-step>
</lee-steps>
<lee-button @click="next">下一步</lee-button>
<lee-button @click="prev">上一步</lee-button>

<script>
    export default {
        data() {
              return {
                active:0
              }
          },
          methods:{
            next(){
              this.active+=1
              if(this.active>3){
                this.active=0
              }
            },
            prev(){
              this.active-=1
              if(this.active<0){
                this.active=0
              }
            }
          }
    }
</script>

显示代码

居中步骤条：

多样

组件多样化，让你减少开发UI烦恼

基于Vue

基于Vue，生态圈更强大。

效率

简单配置，立即生效，缩短开发周期。

<lee-steps :active="active" color="#46bd87" center fill finish="success">
    <lee-step title="多样">组件多样化，让你减少开发UI烦恼</lee-step>
    <lee-step title="基于Vue">基于Vue，生态圈更强大。</lee-step>
    <lee-step title="效率">简单配置，立即生效，缩短开发周期。</lee-step>
</lee-steps>
<lee-button @click="next">下一步</lee-button>
<lee-button @click="prev">上一步</lee-button>

<script>
    export default {
        data() {
              return {
                active:0
              }
          },
          methods:{
            next(){
              this.active+=1
              if(this.active>3){
                this.active=0
              }
            },
            prev(){
              this.active-=1
              if(this.active<0){
                this.active=0
              }
            }
          }
    }
</script>

显示代码

竖向步骤条：

多样

组件多样化，让你减少开发UI烦恼

基于Vue

基于Vue，生态圈更强大。

效率

简单配置，立即生效，缩短开发周期。

<lee-steps :active="active" color="#46bd87" direction="vertical">
   <lee-step title="多样">组件多样化，让你减少开发UI烦恼</lee-step>
    <lee-step title="基于Vue">基于Vue，生态圈更强大。</lee-step>
    <lee-step title="效率">简单配置，立即生效，缩短开发周期。</lee-step>
</lee-steps>
<lee-button @click="next">下一步</lee-button>
<lee-button @click="prev">上一步</lee-button>

<script>
    export default {
        data() {
              return {
                active:0
              }
          },
          methods:{
            next(){
              this.active+=1
              if(this.active>3){
                this.active=0
              }
            },
            prev(){
              this.active-=1
              if(this.active<0){
                this.active=0
              }
            }
          }
    }
</script>

显示代码

Steps 属性

Parameter	Description	Type	Optional Value	Default Value
active	当前状态序号	Number	0,1,2	0
color	当前状态颜色	String	--	--
direction	步骤条方向	String	horizontal,vertical	horizontal
fill	当前状态颜色用填充方式	Boolean	true,false	false
center	居中展示	Boolean	true,false	false
finish	结束步骤的状态	String	success,finish	finish

Step 属性

Parameter	Description	Type	Optional Value	Default Value
title	步骤标题	String	--	--