vue 自定义步骤条样式

element提供的步骤条组件是定义好的样式，跟我需要的样式有很大差别，修改起来也很麻烦。下图就是我所需的步骤条样式

步骤条样式是可以修改的，

在template中

<!-- 顶部步骤条 -->
    <div class="createorder_top">
      <div class="createorder_top_left">
        <span
          class="createorder_left_set"
          :class="activeNum == 0 ||activeNum ==1||activeNum ==2?'activeSet':''"
        >1.上传销售合同</span>
        <span class="createorder_left_setdivision"></span>
        <span
          class="createorder_left_set"
          :class="activeNum ==1||activeNum ==2?'activeSet':''"
        >2.编辑信息</span>
        <span class="createorder_left_setdivision"></span>
        <span class="createorder_left_set" :class="activeNum ==2?'activeSet':''">3.指标要求</span>
      </div>
      <div class="createorder_top_right">
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </div>

<!-- 步骤条所对应的内容 -->
    <div class="createorder_bott">
      <div class="createorder_bott_one" v-if="activeNum==0">1</div>
      <div class="createorder_bott_one" v-if="activeNum==1">2</div>
      <div class="createorder_bott_one" v-if="activeNum==2">3</div>
    </div>

css样式

.createorder_top {
  background-color: #fff;
  padding: 0 18px;
  width: 100%;
  height: 71px;
  line-height: 71px;
  display: flex;
  justify-content: space-between;
}

.createorder_top .createorder_top_left .createorder_left_set {
  font-size: 18px;
  color: #304156;
}

.createorder_top .createorder_top_left .activeSet {
  color: #409EFF;
}

.createorder_top .createorder_top_left .createorder_left_setdivision {
  display: inline-block;
  background-color: #99A9BF;
  width: 2px;
  height: 14px;
  margin: 0 46px;
}

通过css样式可以将步骤条修改成你自己想要的样式

methods方法

export default {
    data(){
         return{
          activeNum: 0,
        }
    },
     created(){
       this.activeNum = 0
    },
    methods: {
      next() {
        if(this.activeNum++ >= 2){
          this.activeNum = 0;
        }
      },
    }
}