elementui Steps 步骤条的使用

原创已于 2023-01-12 17:09:45 修改 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2023-01-12 16:53:49 首次发布

这篇文章介绍了如何在ElementUI框架中修改steps组件的样式，建议在全局CSS文件assets/css/global.css中进行更改。示例展示了一个居中对齐、激活状态为0、完成状态为成功的步骤条，包含了基本信息、商品参数、属性、图片和内容等步骤。

  <!-- 步骤条区域  如果想要改变elementui组件的样式，建议到assets里面的css里面的global.css里面去改-->
      <!-- align-center文本居中显示   :active="activeIndex"激活项  -->
      <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>