条纹进度条

原创已于 2022-03-15 13:40:05 修改 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript #前端

于 2022-03-15 13:33:41 首次发布

本文介绍了如何使用 Vue.js 实现一个可配置的条纹进度条，支持动态设置宽度、等分竖条、颜色和百分比指示。通过组件化方式简化了在页面中应用的过程。

要求如下写个条纹进度条

以下是封装的文件引入可直接使用

<template>
  <!--  @mouseover="showTip=true" @mouseleave="showTip=false"-->
  <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">
          <el-tooltip
            v-if="n=== colsActive"
            v-model="showTip"
            :manual="true"
            :key="n"
            :content="percent+'%'"
            :popper-class="processTipBoo ? 'processTip': 'processTip1'"
            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>

<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>

<style scoped lang="scss">
    .processBox {
        padding:4px 0 4px 8px !important;  //因为旋转，导致左，上间距不同。
        box-sizing: content-box;
        border:1px solid #ddd;
        margin-top: 20px;
      .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 {
            display: inline-block;
            height:100%;
            transform: skewX(-30deg); //倾斜
        }

      .active{
        color: red;
      }
    }
   /deep/ .popper__arrow::after{
      border-top-color:#ccc
    }
</style>

<style lang="scss">
// 全局
 .processTip, .processTip1{
      //position: relative;

      padding:5px 20px !important;
      color: #64ae8f;
      font-weight: bold;
      font-size: 15px;
      //border-radius: 50%;
      width: 95px;
      text-align: center;
      border-radius: 0;
      border: 1px solid  #ccc !important;
      box-shadow: 0 2px 5px 2px rgba(0,0,0,0.12);
      top: 125px !important;
  }
  .processTip1{
    color: #da5953;
  }
  .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
    border-top-color: #ccc !important;
  }
  .el-tooltip__popper[x-placement^=top] .popper__arrow{
    border-top-color: #ccc !important;
  }

</style>

封装完以后引入页面 components 里面注册然后页面使用

<ProcessCustom :percent="progressbarValue" :width="500" :process-tip-boo="true" bg-color="#5fb38c"/>

条纹进度条

1 条评论