Vue3 Typescript实现Windows鼠标精确框选div 并且获取鼠标已经框选div内容可以移动位置并且已经框选div内容打印到控制台

以下是Vue3 Typescript实现Windows鼠标精确框选div并获取鼠标已经框选div内容可以移动位置并且已经框选div内容打印到控制台的示例代码：

<template>
  <div class="container" ref="container" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">
    <div class="box" v-for="(box, index) in boxes" :key="index" :style="{ left: box.left + 'px', top: box.top + 'px', width: box.width + 'px', height: box.height + 'px' }">{{ box.id }}</div>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const container = ref<HTMLElement | null>(null)
    const boxes = ref<Array<{ id: number, left: number, top: number, width: number, height: number }>>([])
    let isSelecting = false
    let startX = 0
    let startY = 0
    let endX = 0
    let endY = 0

    const onMouseDown = (event: MouseEvent) => {
      if (!event.shiftKey) {
        boxes.value = []
      }
      startX = event.pageX
      startY = event.pageY
      isSelecting = true
    }

    const onMouseMove = (event: MouseEvent) => {
      if (isSelecting) {
        endX = event.pageX
        endY = event.pageY
        const containerRect = container.value?.getBoundingClientRect()
        if (containerRect) {
          const left = Math.min(startX, endX) - containerRect.left
          const top = Math.min(startY, endY) - containerRect.top
          const width = Math.abs(startX - endX)
          const height = Math.abs(startY - endY)
          boxes.value.push({
            id: boxes.value.length + 1,
            left,
            top,
            width,
            height
          })
        }
      }
    }

    const onMouseUp = () => {
      isSelecting = false
      const selectedBoxes = boxes.value.filter((box) => {
        const boxRect = {
          left: box.left,
          top: box.top,
          right: box.left + box.width,
          bottom: box.top + box.height
        }
        const selectRect = {
          left: Math.min(startX, endX),
          top: Math.min(startY, endY),
          right: Math.max(startX, endX),
          bottom: Math.max(startY, endY)
        }
        return boxRect.left < selectRect.right && boxRect.right > selectRect.left && boxRect.top < selectRect.bottom && boxRect.bottom > selectRect.top
      })
      console.log(selectedBoxes)
    }

    onMounted(() => {
      document.addEventListener('mousemove', onMouseMove)
      document.addEventListener('mouseup', onMouseUp)
    })

    onUnmounted(() => {
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)
    })

    return {
      container,
      boxes,
      onMouseDown,
      onMouseMove,
      onMouseUp
    }
  }
})
</script>

<style scoped>
.container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #eee;
  overflow: hidden;
}

.box {
  position: absolute;
  border: 1px solid #000;
  background-color: #fff;
  cursor: move;
}
</style>

在上面的示例代码中，我们使用了三个变量来跟踪鼠标的状态和框选的结果：

• isSelecting：表示是否正在框选中。
• startX 和 startY：表示框选的起始点。
• endX 和 endY：表示框选的结束点。

在 onMouseDown 事件中，我们记录下了鼠标按下时的坐标，并将 isSelecting 设为 true。

在 onMouseMove 事件中，如果正在框选中，我们记录下了鼠标移动时的坐标，并根据起始点和结束点计算出当前框选的矩形框的位置和大小，并将其添加到 boxes 数组中。

在 onMouseUp 事件中，我们将 isSelecting 设为 false，并根据起始点和结束点计算出所有被框选的矩形框，并将其打印到控制台中。

在模板中，我们使用 @mousedown、@mousemove 和 @mouseup 事件来监听鼠标的操作，并将它们分别绑定到 onMouseDown、onMouseMove 和 onMouseUp 方法上。我们还使用了 v-for 指令来渲染所有的矩形框，并根据它们的位置和大小来设置它们的样式