el-step的應用

隨着移動互聯網時代的到來，Web應用開發的步伐也越來越快，同時用戶體驗也越來越重要。作為一個前端開發者，我們需要不斷的提高用戶的體驗感，讓用戶能夠更加舒心的使用我們的應用。而這時，步驟條就可以用來優化我們的應用。

一、el-step換行

默認的el-step組件是在同一行顯示的，而如果我們需要在不同行顯示，需要使用align-center屬性。該屬性還可以設置上下居中，具體如下：

  
    <el-steps align-center>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps>
  

二、el-step文字位置

el-step中默認文字的位置是在圖標下方，而有時候我們需要文字在圖標旁邊顯示，這時可以使用direction屬性。具體如下：

  
    <el-steps direction="vertical">
      <el-step title="第一步" description="這是第一步"></el-step>
      <el-step title="第二步" description="這是第二步"></el-step>
      <el-step title="第三步" description="這是第三步"></el-step>
    </el-steps>
  

三、el-step顏色

在el-step中，我們可以自定義每一個步驟的顏色。實現方法是給el-step中添加icon屬性。如下：

  
    <el-steps>
      <el-step title="第一步" icon="el-icon-search" status="success"></el-step>
      <el-step title="第二步" icon="el-icon-info" status="process"></el-step>
      <el-step title="第三步" icon="el-icon-error" status="error"></el-step>
    </el-steps>
  

四、el-step的點擊

我們可以為每一個步驟添加點擊事件，讓用戶能夠更方便的進行下一步。實現方法是使用@click事件。如下：

  
    <el-steps>
      <el-step title="第一步" @click="goNext(1)"></el-step>
      <el-step title="第二步" @click="goNext(2)"></el-step>
      <el-step title="第三步" @click="goNext(3)"></el-step>
    </el-steps>
  

五、el-step的slot

在el-step中，我們可以使用slot來自定義顯示內容。如下：

  
    <el-steps>
      <el-step>
        <template v-slot:title>
          <span>第一步</span>
        </template>
        <template v-slot:description>
          <span>這是第一步描述</span>
        </template>
      </el-step>
      <el-step>
        <template v-slot:title>
          <span>第二步</span>
        </template>
        <template v-slot:description>
          <span>這是第二步描述</span>
        </template>
      </el-step>
    </el-steps>
  

六、el-step設置寬度

有時候我們需要手動設置el-step的寬度，如下：

  
    <el-steps>
      <el-step :style="{width: '200px'}"></el-step>
      <el-step :style="{width: '200px'}"></el-step>
      <el-step :style="{width: '200px'}"></el-step>
    </el-steps>
  

七、el-step步驟過多

對於步驟比較長的應用，有時候需要使用type="simple"屬性來簡化顯示。如下：

  
    <el-steps type="simple">
      <el-step title="第一步"></el-step>
      <el-step title="第二步"></el-step>
      <el-step title="第三步"></el-step>
    </el-steps>
  

八、el-steps數字倒序

我們可以通過finish-status屬性設置完成狀態的顏色，同時還可以設置數字倒序顯示。如下：

  
    <el-steps :finish-status="'rgb(51, 196, 96)'" direction="vertical">
      <el-step title="第3步"></el-step>
      <el-step title="第2步"></el-step>
      <el-step title="第1步"></el-step>
    </el-steps>
  

九、el-step設置滾動條

當步驟比較多時，我們可以通過設置el-steps的寬度和步驟寬度來控制滾動條的出現。如下：

  
    <div style="max-height: 500px; overflow-y: auto;">
      <el-steps :style="{width: stepWidth}">
        <el-step v-for="(item, index) in 10" :key="index"></el-step>
      </el-steps>
    </div>
  

通過以上內容的學習，我們可以更好的掌握el-step組件的應用，為我們的Web應用開發提供更加優化的用戶體驗。