图片对比

蒙版效果

可通过底部拖拽调整蒙版边界。

<template>
  <div class="image-slider">
    <div><img :src="url" width="300"/></div>
    <img :src="url" width="300"/>
  </div>
</template>

<script setup>
const url =
  'https://uploadstatic.mihoyo.com/ys-obc/2022/12/05/12109492/6105ce8dd57dfd2efbea4d4e9bc99a7f_3316973407293091241.png'
</script>

<style lang="scss" scoped>
.image-slider {
  position: relative;
}

.image-slider > div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 150px;
  overflow: hidden;
  resize: horizontal;
  max-width: 300px;
  img {
    filter: blur(7px);
    max-width: none;
  }
}
</style>