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

先看效果：

 

直接上代码

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