先看效果:
直接上代码
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; } }