有一个需求就是在你有俩张图片一样大小，一个亮色的，一个暗色的，亮色的根据后端返回的数据显示多高，这样就有一个感觉是慢慢往上走的，主要用到了css的一个属性
.my-info-image {width: 280px;height: 200px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 328px;position: relative;overflow: hidden;.postion-img,.postion-img-light {width: 100%;height: 100%;position: absolute;}.postion-img {z-index: 2;object-fit: cover;}.postion-img-light {z-index: 3;object-fit: cover;// clip-path: inset(85% 0 0 0);transition: clip-path 0.5s ease;}}
<div class="my-info-image"><img :src="require('../assets/images/thoughs/lightrank/rank.png')" alt="" class="postion-img"><img:src="require('../assets/images/thoughs/lightrank/rank-light.png')"alt="" class="postion-img-light":style="clipStyle">
</div>
也可以直接这么写
:style="{ clipPath: `inset(${100 - num}% 0 0 0)` }"
computed: {clipStyle() {return {clipPath: `inset(${100 - this.num}% 0 0 0)`,WebkitClipPath: `inset(${100 - this.num}% 0 0 0)`}}
},
一定要知道数据能不能拿到，想测试的时候别在data里边写了静态的值，然后后端拿到的值是0，一定要先把后端拿到的值注释掉（如果不是0当我没说）
)
