溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用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>含狀態步驟條
<el-steps :space="200" :active="1" finish-status="success"> <el-step title="已完成"></el-step> <el-step title="進行中"></el-step> <el-step title="步驟 3"></el-step> </el-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>
居中的步驟條
<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>
帶圖標的步驟條
<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>
豎式步驟條
<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>
簡潔風格的步驟條
<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
Step
Attributes
Step
Slot
看完上述內容，是不是對如何使用Element Steps步驟條有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
