基于vue，自定义条形进度条/辣条进度条

第一种，悬浮选显示进度条，如果不需要悬浮可以 showTip为true，这样会导致菜单折叠进度条位置不变，如果悬浮显示就没有问题，

<template>

  <div :style="{width:width+'px'}" class="processBox" @mouseover="showTip=true" @mouseleave="showTip=false" >

    <div :style="{width:width+'px'}" class="bgBox">
      <template v-for="n in cols">
        <span ref="bg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px'}" class="bg" style="background-color:#f2f2f2" />
      </template>

      <div :style="{width:width+'px'}" class="qgBox">
        <template v-for="n in colsActive">
          <el-tooltip v-if="n=== colsActive" v-model="showTip" :manual="true" :key="n" :content="percent+'%'"
                      popper-class="processTip" effect="light" placement="top">
            <span ref="qg" :style="{width:colWidth+'px',marginRight:colWidth+'px',backgroundColor:bgColor}" class="qg" />
          </el-tooltip>
          <span v-else ref="qg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px',
          backgroundColor:bgColor}" class="qg" />
        </template>
      </div>
    </div>
  </div>
</template>
 
 js
props: {
    // 注：此宽度按cols进行等分！若进度条间距不均衡，可适当修改值。
    width: {
      type: Number,
      default: 600
    },
    // 等分的竖条。如果width比较大，如1920.则这里cols可以设大点。
    cols: {
      type: Number,
      default: 36
    },
    // 百分比
    percent: {
      type: Number,
      default: 0
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#37b588'
    }
  },
   data() {
    return {
      showTip: false
    }
  },
  computed: {
    // 激活的竖条
    colsActive() {
      return parseInt(this.percent / (100 / this.cols))
    },

    // 单个竖条宽度
    colWidth() {
      return (this.width / this.cols / 2)
    }
  }

}

css
 .processBox {
        padding:4px 0 4px 8px !important;  //因为旋转，导致左，上间距不同。
        box-sizing: content-box;
        border:1px solid #ddd;

        .qgBox,
        .bgBox {
            display: flex;
            /* 默认就是下面此属性
            flex-wrap:nowrap; //不换行
            justify-content: flex-start ; //左对齐
            */
        }

        .bgBox {
            position: relative;
            height: 14px;
        }
        .qgBox {
            position: absolute;top:0px;left:0;
            width:100%; height: 100%;
        }

        .bg,
        .qg {

            /* flex: 0  0  auto ; */
            display: inline-block;
            height:100%;
            transform: skewX(-30deg); //倾斜
        }
    }

第二种，永远显示进度条，不涉及悬浮，菜单折叠也没问题

**html**
<template>
  <div :style="{width:width+'px'}" class="processBox">
    <div :style="{width:width+'px'}" class="bgBox">
      <template v-for="n in cols">
        <span ref="bg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px'}"
              class="bg" style="background-color:#f2f2f2"/>
      </template>
      <div :style="{width:width+'px'}" class="qgBox">
        <template v-for="n in colsActive">
          <div ref="qg" :key="n" :style="{width:colWidth+'px',marginRight:colWidth+'px',backgroundColor:bgColor}"
               class="qg">
            <div v-if="n=== colsActive" :key="n" :class="processTipBoo ? 'processTipGreen': 'processTipRed'">
                {{ percent }}%
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

**js**
<script>
export default {
  props: {
    // 注：此宽度按cols进行等分！若进度条间距不均衡，可适当修改值。
    width: {
      type: Number,
      default: 600
    },
    // 等分竖条
    cols: {
      type: Number,
      default: 48
    },
    // 百分比
    percent: {
      type: Number,
      default: 0
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#37b588'
    },
    processTipBoo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showTip: true
    }
  },
  computed: {
    // 激活的竖条
    colsActive() {
      return parseInt (this.percent / (100 / this.cols))
    },

    // 单个竖条宽度
    colWidth() {
      return (this.width / this.cols / 2)
    }
  }

}
</script>


<script>
export default {
  props: {
    // 注：此宽度按cols进行等分！若进度条间距不均衡，可适当修改值。
    width: {
      type: Number,
      default: 600
    },
    // 等分竖条
    cols: {
      type: Number,
      default: 48
    },
    // 百分比
    percent: {
      type: Number,
      default: 0
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#37b588'
    },
    processTipBoo: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showTip: true
    }
  },
  computed: {
    // 激活的竖条
    colsActive() {
      return parseInt (this.percent / (100 / this.cols))
    },

    // 单个竖条宽度
    colWidth() {
      return (this.width / this.cols / 2)
    }
  }

}
</script>


**css**

<style scoped lang="scss">
.processBox {
  padding: 4px 0 4px 8px !important; //因为旋转，导致左，上间距不同。
  box-sizing: content-box;
  border: 1px solid #ddd;
  margin-top: 10px;

  .qgBox,
  .bgBox {
    display: flex;
    /* 默认就是下面此属性
    flex-wrap:nowrap; //不换行
    justify-content: flex-start ; //左对齐
    */
  }

  .bgBox {
    position: relative;
    height: 14px;
  }

  .qgBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .bg,
  .qg {
    position: relative;
    display: inline-block;
    height: 100%;
    transform: skewX(-30deg); //倾斜
  }

  .processTipGreen, .processTipRed {
    color: #64ae8f;
    font-weight: bold;
    font-size: 15px;
    z-index: 99;
    position: absolute;
    bottom: 20px;
    left: 0;
    margin-left: -35px;
    height: 30px;
    line-height: 30px;
    width: 55px;
    text-align: center;
    padding-left: 5px;
    transform: skewX(30deg); //倾斜
    background: url("../assets/img/bg.png"); 悬浮背景图片
    background-size: 100%;

  }

  .processTipRed {
    color: #da5953;
  }
}
</style>