项目中自定义进度条的实现

先看效果:

项目中自定义进度条的实现

 

直接上代码

let arr = [0,1,16]
function setProcessStyle(arr = [1, 2, 3]) {  
      // 待生产
      // 已组模完成
      // 隐蔽验收
      // 已浇筑
      // 已浇筑
      let num1 = arr[0];
      let num2 = num1 + arr[1];
      let num3 = num2 + arr[2]; 
      let styleArr = [
      toPercentage(num1 / num3) ,
      toPercentage(num2 / num3), 
        '100%'
      ]; 
      console.log(styleArr)
      let colors = ['#1b54f4', '#ff8600', '#00c800', '#5c0a98', '#021e66'];      
      let str = `linear-gradient(to right,${colors[0]} 0%,${colors[0]} ${styleArr[0]},${colors[1]} ${styleArr[0]},${colors[1]} ${styleArr[1]},${colors[2]} ${styleArr[1]},${colors[2]} ${styleArr[2]})`;           
      return str           
    }
function toPercentage(data) { var str = Number(data * 100).toFixed(1); str += '%'; return str; }

state.processStyle = setProcessStyle(arr)


  

<div :style="{ background:processStyle }" class="process"></div>

 

&::before  &::after  是为了让  el-popover  组件的触发区域更大
.process {
              position: relative;
              cursor: pointer;
              width: 100%;
              height: 4px;
              margin-top: 20px;
              border-radius: 4px;
              &::before {
                width: 100%;
                top: -4px;
                left: 0;
                content: '';
                position: absolute;
                height: 4px;
              }
              &::after {
                width: 100%;
                top: 4px;
                left: 0;
                content: '';
                position: absolute;
                height: 4px;
              }
            }

  

 

上一篇:rhcsa 8 - docker


下一篇:狠人!标星 3.4 万的项目说删就删,几行代码搞崩数万个开源项目