有一個需求就是在你有倆張圖片一樣大小，一個亮色的，一個暗色的，亮色的根據后端返回的數據顯示多高，這樣就有一個感覺是慢慢往上走的，主要用到了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當我沒說）
)
