elementUI步骤条样式改造

最新推荐文章于 2025-06-11 12:21:17 发布

别忘了微笑_cuicui

最新推荐文章于 2025-06-11 12:21:17 发布

阅读量1.4w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： elementUI样式 vue+element项目

本文链接：https://blog.youkuaiyun.com/CuiCui_web/article/details/100041704

vue+element项目同时被 2 个专栏收录

34 篇文章

订阅专栏

elementUI样式

9 篇文章

订阅专栏

本文介绍了一种使用动态添加类名方式改进Vue中步骤组件样式的方法，通过修改结构、数据定义及样式部分，实现对特定步骤的高亮显示，适用于项目管理或流程展示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改的效果图如上。下面详细介绍修改的步骤。（通过动态添加类名的方式改进样式）

结构部分

<el-steps :active="milepostActive" >
  <el-step v-for="(value, key) in milepost"
           :class="milepostActive== key+1 ? stepActive: '' "
           :title="value.title"
           :description="value.description">
  </el-step>
</el-steps>

数据定义部分（data）

data () {
  return {
    // 数组对象
    milepost: [
      {title: '项目策划', description: '2019.1.1'},
      {title: '立项', description: '2019.3.1'},
      {title: '需求', description: '2019.5.1'},
      {title: '开发', description: '2019.7.1'},
      {title: '测试', description: '2019.9.1'},
      {title: '发布', description: '2019.11.1'},
      {title: '结项', description: '2019.12.31'},
    ],
    // 默认步骤数
    milepostActive: 5,
    // 动态添加类名
    stepActive: 'stepActive'
  }
},

样式部分

<style lang="scss">
 .el-step.is-horizontal.stepActive{
   .el-step__head.is-finish{
     .el-step__line{
       // 当前步骤数横线样式设置
       .el-step__line-inner{
         width: 50% !important;
         border-width: 1px !important;
       }
     }
     // 当前步骤数圆圈样式设置
     .el-step__icon.is-text{
       background: #409eff;
       color:#fff;
     }
   }
 }
</style>