elmentui的Steps 步骤条样式改造

Posted 2023-04-29 小白字太白

话不多说 上代码

<template>
  <div >
    <el-alert :closable="false" title="menu 2" />
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字">

        <span slot="title"  />

        description可有多个取决于节点需要

        <span slot="description"  />

        <span slot="description"  />

      </el-step>

      <el-step title="步骤 1" icon="el-icon-sort-up">a</el-step>
      <el-step title="步骤 2" icon="el-icon-sort-up">a</el-step>
      <el-step title="步骤 3" icon="el-icon-sort-up">a</el-step>
    </el-steps>

    <el-button  @click="next">下一步</el-button>

    <el-steps direction="vertical" :active="1">
      <el-step title="步骤 1" />
      <el-step title="步骤 2" />
      <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字" />
    </el-steps>
    <el-steps :active="milepostActive">
      <el-step
        v-for="(value, key) in milepost"
        :key="key"
        :class="milepostActive== key+1 ? stepActive: noActive "
        :title="value.title"
        :description="value.description"
      />
    </el-steps>
  </div>
</template>

<script>
export default 
  data() 
    return 
      active: 0,
      // 数组对象
      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\',
      noActive: \'noActive\'

    
  ,

  methods: 
    next() 
      if (this.active++ > 3) this.active = 0
    
    // mouseOver()

    // 
  

</script>
<style lang="scss">
 .el-step.is-horizontal.noActive
   .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: rgb(146, 224, 146);
       color:#fff;
     
   
 
 .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: red;
       color:#fff;
     
   
 
</style>

　　

element 步骤条steps 点击事件

 

 

<el-steps direction="vertical" :active="actives" finish-status="success" style="height: 500px; padding-top: 20px">
            <el-step @click.native="on_click(0)" title="产品基本信息"></el-step>
            <el-step @click.native="on_click(1)" title="产品参数设定"></el-step>
            <el-step @click.native="on_click(2)" title="产品费用设定"></el-step>
            <el-step @click.native="on_click(3)" title="适应范围-代理商设置"></el-step>
            <el-step @click.native="on_click(4)" title="适应范围-车辆设置"></el-step>
</el-steps>

 

data() {
    return {
      // 步骤条
      actives: 0,
   }
}

 

 methods: {

    // 步骤条
    on_click(e){
      console.log(e);
      if(e != ‘‘ || e != null){ this.actives = e }
    }

}

 

 

效果图：

 

 

参考https://jsfiddle.net/1m6kkqgg/