在一个需要用到进度条的场景下,且背景是图片,可以利用裁剪功能来进行完成
下面提供思路
关键点在于rect(0px, params + ‘px’, 0px, 0px) 中的params位置不能写死,需要配合JS,或者Vue中的模板表达式来进行设置,提供后一种实现代码
<img src="./" :style="{ clip: rect(0px, ((currentNumber/totalNumber) * 100 + '%') * imgLength + 'px' , 0px, 0px)}" >
img {
position:absolute;
/* clip: rect(0px, params, 0px, 0px); */
}