vue3.0 能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)。

能拖动分割线查看两张图的前后对比效果(鼠标滑动两张图片前后对比)

来吧 展示 come on baby：
详细点开全屏看效果哦：

duiBi

html:

<template>
  <div class="mainSection">
      <div id="one" class="bal-container">
        <div class="bal-after">
          <img src="@/image/1.jpg" />
          <div class="bal-afterPosition afterLabel">修复前</div>
        </div>
        <div class="bal-before">
          <div class="bal-before-inset">
            <img src="@/image/2.png" />
            <div class="bal-beforePosition beforeLabel">修复后</div>
          </div>
        </div>
        <div class="bal-handle">
          <span class="handle-left-arrow"></span>
          <span class="handle-right-arrow"></span>
        </div>
      </div>
    </div>
</template>

ts(typescript):

<script lang="ts" setup>
import {onMounted,ref} from "vue"
import BeforeAfter from '@/utils/beforafter'
onMounted(()=>{
  new BeforeAfter({
    id: "#one",
  });
})
</script>

src/utils/beforafter.js文件

class BeforeAfter {
  constructor(enteryObject) {
    const beforeAfterContainer = document.querySelector(enteryObject.id);
    const before = beforeAfterContainer.querySelector('.bal-before');
    const beforeText = beforeAfterContainer.querySelector('.bal-beforePosition');
    const afterText = beforeAfterContainer.querySelector('.bal-afterPosition');
    const handle = beforeAfterContainer.querySelector('.bal-handle');
    var widthChange = 0;
    beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
    window.onresize = function () {
      beforeAfterContainer.querySelector('.bal-before-inset').setAttribute("style", "width: " + beforeAfterContainer.offsetWidth + "px;")
    }
    before.setAttribute('style', "width: 50%;");
    handle.setAttribute('style', "left: 50%;");
    //touch screen event listener
    beforeAfterContainer.addEventListener("touchstart", (e) => {
      beforeAfterContainer.addEventListener("touchmove", (e2) => {
        let containerWidth = beforeAfterContainer.offsetWidth;
        let currentPoint = e2.changedTouches[0].clientX;
        let startOfDiv = beforeAfterContainer.offsetLeft;
        let modifiedCurrentPoint = currentPoint - startOfDiv;
        if (modifiedCurrentPoint > 10 && modifiedCurrentPoint < beforeAfterContainer.offsetWidth - 10) {
          let newWidth = modifiedCurrentPoint * 100 / containerWidth;
          before.setAttribute('style', "width:" + newWidth + "%;");
          afterText.setAttribute('style', "z-index: 1;");
          handle.setAttribute('style', "left:" + newWidth + "%;");
        }
      });
    });
    //mouse move event listener
    beforeAfterContainer.addEventListener('mousemove', (e) => {
      let containerWidth = beforeAfterContainer.offsetWidth;
      widthChange = e.offsetX;
      let newWidth = widthChange * 100 / containerWidth;

      if (e.offsetX > 10 && e.offsetX < beforeAfterContainer.offsetWidth - 10) {
        before.setAttribute('style', "width:" + newWidth + "%;");
        afterText.setAttribute('style', "z-index:" + "1;");
        handle.setAttribute('style', "left:" + newWidth + "%;");
      }
    })
  }
}

css:

<style>
.mainSection {
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: center;
  align-content: center;
}
/* Before After Container */
.bal-container {
  width: 600px;
  height: 450px;
  position: relative;
  cursor: grab;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.bal-after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bal-before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  overflow: hidden;
}
.bal-before-inset {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.bal-after img,
.bal-before img {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  top: 0;
  bottom: 0;
  left: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.bal-beforePosition {
  background: #121212;
  color: #fff;
  left: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}
.bal-afterPosition {
  background: #121212;
  color: #fff;
  right: 0;
  pointer-events: none;
  border-radius: 0.2rem;
  padding: 2px 10px;
}
.beforeLabel {
  position: absolute;
  top: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.afterLabel {
  position: absolute;
  top: 0;
  margin: 1rem;
  font-size: 1em;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/* handle and arrow */
.bal-handle {
  height: 41px;
  width: 41px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -21px;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}
.handle-left-arrow,
.handle-right-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
}
.handle-left-arrow {
  border-right: 6px solid #fff;
  left: 50%;
  margin-left: -17px;
}
.handle-right-arrow {
  border-left: 6px solid #fff;
  right: 50%;
  margin-right: -17px;
}
.bal-handle::before {
  bottom: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgb(12, 12, 12);
}
.bal-handle::after {
  top: 50%;
  margin-top: 20.5px;
  box-shadow: 0 0 5px rgb(12, 12, 12);
}
.bal-handle::before,
.bal-handle::after {
  content: " ";
  display: block;
  width: 2px;
  background: #fff;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
}
</style>

为了方便大家，附前后对比图直接复制保存使用：