重读vue电商网站14之步骤条的使用与美化
  TEZNKK3IfmPf 2024年07月27日 67 0

以下就是步骤条使用的核心代码,其中 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;
}

最终实现效果如下:

重读vue电商网站14之步骤条的使用与美化

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月27日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年08月09日   63   0   0 javascript前端
  I7JaHrFMuDsU   2024年08月09日   55   0   0 vue用户
TEZNKK3IfmPf