两张图片对比效果

我有个不好的脑子，自己做过的功能，过个两个月我就忘记了，疫情期间的面试也让我受打击，嗨，没事了，把自己弄的案例总结一下，不装逼，直接贴代码

  <div class="palette">
    <div class="paletteIn wow bounceIn">
      <h2 class="paletteIn_title">{{tuozhuaiDesc.title}}</h2>
      <p class="paletteIn_p">{{tuozhuaiDesc.desc}}</p>
      <div class="warpp">
        <div id="box" ref="box">
          <div id="left" ref="left" :style="{'background-image': 'url('+ tuozhuaiDesc.anImg +')'}"></div>
          <div id="resize" ref="resize">
            <div class="resize_icon">
            </div>
          </div>
          <img :src="tuozhuaiDesc.liangImg" class="right_abc" style="1200px;height:666px" />
        </div>
      </div>
      <div class="palette_b_t">
        <p>{{tuozhuaiDesc.anDesc}}</p>
        <p>{{tuozhuaiDesc.liangDesc}}</p>
      </div>
    </div>
  </div>

  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv: function() {
      var box = document.getElementById("box");
      var left = document.getElementById("left");
      // var right = document.getElementById("right");
      var resize = document.getElementById("resize");

      resize.onmousedown = function(e) {
        var startX = e.clientX;
        resize.left = resize.offsetLeft;

        document.onmousemove = function(e) {
          var endX = e.clientX;

          var moveLen = resize.left + (endX - startX);

          var maxT = box.clientWidth - resize.offsetWidth;

          if (moveLen < 30) moveLen = 30;
          if (moveLen > maxT - 30) moveLen = maxT - 30;

          resize.style.left = moveLen;
          left.style.width = moveLen + "px";
          // right.style.width = box.clientWidth - moveLen - 5 + "px";
        };

        document.onmouseup = function(evt) {
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture();
        };
        resize.setCapture && resize.setCapture();
        return false;
      };
    }
  }