在春风动力的官网里看到了这个效果，然后自己写了一个
效果：
使用：

<he-contrast width="600">
  <template #left>
    <img src="@/assets/img/VFX2-before.jpg" class="images" />
  </template>
  <template #right>
    <img src="@/assets/img/VFX2-after.jpg" class="images" />
  </template>
</he-contrast>

组件封装：

<template>
  <div
    class="PictureComparison"
    :style="'width:' + width + 'px;height:' + height + 'px'"
  >
    <div class="before-image" :style="'width:' + x + 'px'" @click.stop="goLeft">
      <div :style="'width:' + width + 'px;height:' + height + 'px'">
        <slot name="left"></slot>
      </div>
    </div>
    <div class="after-image" @click.stop="goRight">
      <div :style="'width:' + width + 'px;height:' + height + 'px'">
        <slot name="right"></slot>
      </div>
    </div>
    <div
      class="divider-bar"
      :style="'left:' + x + 'px'"
      @mousedown.prevent="onmouseDown()"
    ></div>
  </div>
</template>

<script>
import {
     reactive, toRefs } from "vue";
export default {
    
  props: {
    
    width: {
     type: String, default: "500" },
    height: {
     type: String, default: "300" },
  },
  setup(props) {
    
    const data = reactive({
    
      isDown: false, //鼠标是否正按住
      moveX: 0, //鼠标移动的位置
      x: props.width / 2, //设置位置
    });
    const onmouseDown = () => {
    
      data.isDown = true;
      data.x = event.target.offsetLeft;
      var disX = event.clientX - event.target.offsetLeft;
      document.onmousemove = function (event) {
    
        if (data.isDown == false) {
    
          return;
        }
        data.x = event.clientX - disX;
        if (data.x >= props.width) {
    
          data.x = props.width;
        } else if (data.x <= 0) {
    
          data.x = 0;
        }
      };
      document.onmouseup = function () {
    
        data.isDown = false;
        document.onmousemove = document.onmouseup = null;
        return false;
      };
    };

    const goLeft = () => {
    
      data.x = 0;
    };
    const goRight = () => {
    
      data.x = props.width;
    };
    return {
    
      ...toRefs(data),
      onmouseDown,
      goLeft,
      goRight,
    };
  },
};
</script>

<style lang="less" scoped>
.PictureComparison {
    
  position: relative;
  display: inline-block;
  margin: 0 auto;
  min-height: 273px;
  margin-bottom: 40px;
  overflow: hidden;

  .before-image {
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 50%;
    overflow: hidden;
  }

  .after-image {
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .divider-bar {
    
    cursor: move;
    position: absolute;
    width: 1px;
    left: 50%;
    top: 0px;
    background: white;
    height: 100%;
    display: block;
    z-index: 2;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
    &::after {
    
      content: "<|>";
      position: absolute;
      color: #ccc;
      text-align: center;
      line-height: 18px;
      width: 40px;
      height: 20px;
      background: #fff;
      border-radius: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>

最后推荐一个前端开发好用的导航网站：www.888i8.cn