?

以下就是步驟條使用的核心代碼，其中?active?綁定的是每一個?step?的下標，默認從?0?開始。其次，我們可以設置?aligin-center?屬性來讓我們的步驟條進行居中。el-step就是每一個步驟進度。

Javascript

<!-- 步驟條區域 --> <el-steps :space="200" :active="activeIndex" finish-status="success" align-center><el-step title="基本信息"></el-step><el-step title="商品參數"></el-step><el-step title="商品屬性"></el-step><el-step title="商品圖片"></el-step><el-step title="商品內容"></el-step><el-step title="完成"></el-step> </el-steps>

更改原本樣式，得到我們想要的效果：

Css

.el-steps{margin: 15px 0; } .el-step__title{font-size: 13px; }

最終實現效果如下：

總結

以上是生活随笔為你收集整理的前端学习（2693）：重读vue电商网站14之步骤条的使用与美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。