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 属性

参数	说明	类型	可选值	默认值
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 属性

参数	说明	类型	可选值	默认值
title	步骤标题	String	--	--