溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用Element Steps步驟條

發(fā)布時(shí)間：2020-07-27 13:53:18 來源：億速云 閱讀：1663 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要講解了如何使用Element Steps步驟條，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

組件— 通知

基礎(chǔ)用法

如何使用Element Steps步驟條

<el-steps :active="active" finish-status="success">
 <el-step title="步驟 1"></el-step>
 <el-step title="步驟 2"></el-step>
 <el-step title="步驟 3"></el-step>
</el-steps>

<el-button  @click="next">下一步</el-button>

<script>
 export default {
  data() {
   return {
    active: 0
   };
  },

  methods: {
   next() {
    if (this.active++ > 2) this.active = 0;
   }
  }
 }
</script>

含狀態(tài)步驟條

如何使用Element Steps步驟條

<el-steps :space="200" :active="1" finish-status="success">
 <el-step title="已完成"></el-step>
 <el-step title="進(jìn)行中"></el-step>
 <el-step title="步驟 3"></el-step>
</el-steps>

有描述的步驟條

如何使用Element Steps步驟條

<el-steps :active="1">
 <el-step title="步驟 1" description="這是一段很長很長很長的描述性文字"></el-step>
 <el-step title="步驟 2" description="這是一段很長很長很長的描述性文字"></el-step>
 <el-step title="步驟 3" description="這段就沒那么長了"></el-step>
</el-steps>

居中的步驟條

如何使用Element Steps步驟條

<el-steps :active="1">
 <el-step title="步驟 1" icon="el-icon-edit"></el-step>
 <el-step title="步驟 2" icon="el-icon-upload"></el-step>
 <el-step title="步驟 3" icon="el-icon-picture"></el-step>
</el-steps>

帶圖標(biāo)的步驟條

如何使用Element Steps步驟條

<el-steps :active="1">
 <el-step title="步驟 1" icon="el-icon-edit"></el-step>
 <el-step title="步驟 2" icon="el-icon-upload"></el-step>
 <el-step title="步驟 3" icon="el-icon-picture"></el-step>
</el-steps>

豎式步驟條

如何使用Element Steps步驟條

<div >
 <el-steps direction="vertical" :active="1">
  <el-step title="步驟 1"></el-step>
  <el-step title="步驟 2"></el-step>
  <el-step title="步驟 3" description="這是一段很長很長很長的描述性文字"></el-step>
 </el-steps>
</div>

簡潔風(fēng)格的步驟條

如何使用Element Steps步驟條

<el-steps :active="1" simple>
 <el-step title="步驟 1" icon="el-icon-edit"></el-step>
 <el-step title="步驟 2" icon="el-icon-upload"></el-step>
 <el-step title="步驟 3" icon="el-icon-picture"></el-step>
</el-steps>

<el-steps :active="1" finish-status="success" simple >
 <el-step title="步驟 1" ></el-step>
 <el-step title="步驟 2" ></el-step>
 <el-step title="步驟 3" ></el-step>
</el-steps>

Steps Attributes

如何使用Element Steps步驟條Step

Attributes

如何使用Element Steps步驟條Step

Slot

如何使用Element Steps步驟條

看完上述內(nèi)容，是不是對(duì)如何使用Element Steps步驟條有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手