【vue3】js + css 实现 视频框选放大：局部细节放大、放大镜效果

在Vue 3中，你可以使用JavaScript和CSS来实现视频框选放大的效果，具体可以通过监听鼠标事件来实现放大镜效果。以下是一个简单的示例：

<template>
  <div class="video-container">
    <video
      ref="video"
      class="video"
      src="your-video-url.mp4"
      @mousemove="handleMouseMove"
      @mouseleave="resetVideo"
    ></video>
    <div
      v-show="isMoving"
      class="magnifier"
      :style="{ top: magnifierTop + 'px', left: magnifierLeft + 'px }"
    ></div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, watch } from 'vue';
 
const video = ref(null);
const isMoving = ref(false);
const magnifier = ref(null);
const magnifierSize = 100; // 放大镜的大小
const videoRect = ref(null);
 
// 鼠标移动事件处理函数
const handleMouseMove = (event) => {
  if (!video.value) return;
  videoRect.value = video.value.getBoundingClientRect();
  const x = event.clientX - videoRect.value.left;
  const y = event.clientY - videoRect.value.top;
 
  // 设置放大镜的位置
  magnifier.value.style.top = `${y - magnifierSize / 2}px`;
  magnifier.value.style.left = `${x - magnifierSize / 2}px`;
 
  isMoving.value = true;
};
 
// 鼠标离开事件处理函数
const resetVideo = () => {
  isMoving.value = false;
};
 
onMounted(() => {
  // 创建放大镜元素
  magnifier.value = document.createElement('div');
  magnifier.value.classList.add('magnifier');
  video.value.parentNode.appendChild(magnifier.value);
});
</script>
 
<style scoped>
.video-container {
  position: relative;
  display: inline-block;
}
.video {
  width: 300px; /* 视频宽度 */
  height: 200px; /* 视频高度 */
  background-color: #000;
}
.magnifier {
  position: absolute;
  width: 100px; /* 放大镜宽度 */
  height: 100px; /* 放大镜高度 */
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  cursor: none; /* 隐藏鼠标指针 */
  contain: strict; /* 确保放大镜内容不被浏览器自动缩放 */
}
</style>

在这个示例中，我们创建了一个视频播放器和一个放大镜元素。当鼠标在视频上移动时，通过监听mousemove事件来更新放大镜的位置，并显示放大镜。当鼠标离开视频区域时，通过监听mouseleave事件来隐藏放大镜。CSS 负责样式设置，包括视频容器、视频元素和放大镜的样式。

请根据你的具体需求调整视频的URL、视频尺寸和放大镜的大小。这个示例提供了一个基本的局部放大效果，你可以根据需要添加更多的视频处理逻辑，比如局部放大算法、边界检查等。