Vue3 Typescript实现Windows鼠标框选div 并且获取鼠标已经框选div内容打印到控制台

以下是Vue3 Typescript实现Windows鼠标框选div并获取内容的示例代码：

<template>
  <div class="container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
    <div class="box" ref="box"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MouseBoxSelect',
  setup() {
    const boxRef = ref<HTMLDivElement | null>(null);
    const startX = ref(0);
    const startY = ref(0);
    const endX = ref(0);
    const endY = ref(0);

    // 鼠标按下时记录起始位置
    const handleMouseDown = (event: MouseEvent) => {
      startX.value = event.clientX;
      startY.value = event.clientY;
      endX.value = event.clientX;
      endY.value = event.clientY;
    };

    // 鼠标移动时更新框选区域
    const handleMouseMove = (event: MouseEvent) => {
      if (boxRef.value) {
        const left = Math.min(startX.value, event.clientX);
        const top = Math.min(startY.value, event.clientY);
        const width = Math.abs(event.clientX - startX.value);
        const height = Math.abs(event.clientY - startY.value);

        boxRef.value.style.left = `${left}px`;
        boxRef.value.style.top = `${top}px`;
        boxRef.value.style.width = `${width}px`;
        boxRef.value.style.height = `${height}px`;

        endX.value = event.clientX;
        endY.value = event.clientY;
      }
    };

    // 鼠标松开时获取框选区域内的内容
    const handleMouseUp = () => {
      if (boxRef.value) {
        const elements = document.elementsFromPoint(endX.value, endY.value);
        const selectedElements = elements.filter((element) => boxRef.value?.contains(element));
        console.log(selectedElements);
      }
    };

    return {
      boxRef,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
    };
  },
});
</script>

<style scoped>
.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}

.box {
  position: absolute;
  border: 1px dashed #f00;
  pointer-events: none;
}
</style>

在上面的代码中，我们使用了ref函数创建了一个boxRef引用，用于获取框选区域的div元素。在handleMouseDown事件处理程序中，我们记录了鼠标按下时的位置，并初始化了框选区域的大小。在handleMouseMove事件处理程序中，我们根据鼠标移动的位置更新框选区域的位置和大小。在handleMouseUp事件处理程序中，我们使用document.elementsFromPoint方法获取鼠标松开时框选区域内的所有元素，并使用filter方法过滤出包含在框选区域内的元素，最终将这些元素打印到控制台中