Vue3 TypeScript 使用 `getBoundingClientRect()` 检测 div 碰撞并获取方向

要检测两个 div 是否发生碰撞，并获取碰撞的方向，可以使用 `getBoundingClientRect()` 方法来获取每个 div 的位置信息，然后根据位置信息判断是否发生碰撞。

首先，给每个 div 添加一个 ref 来获取其 DOM 元素的引用。例如：

<template>
  <div>
    <div ref='div1' class='box'></div>
    <div ref='div2' class='box'></div>
  </div>
</template>

然后，在组件的 `mounted` 钩子函数中，可以使用 `getBoundingClientRect()` 方法来获取 div 的位置信息，并判断是否发生碰撞。例如：

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const div1 = ref(null);
    const div2 = ref(null);

    onMounted(() => {
      const rect1 = div1.value.getBoundingClientRect();
      const rect2 = div2.value.getBoundingClientRect();

      const collision = isCollision(rect1, rect2);
      console.log('Collision:', collision);
    });

    function isCollision(rect1, rect2) {
      return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
      );
    }

    return {
      div1,
      div2
    };
  }
};
</script>

在 `isCollision` 函数中，通过比较两个 div 的左右和上下边界的位置关系，判断是否发生碰撞。如果发生碰撞，返回 `true`，否则返回 `false`。

可以根据具体的需求，修改 `isCollision` 函数来获取碰撞的方向。例如，可以通过比较两个 div 的中心点位置关系来判断碰撞的方向。具体实现方式可以根据实际情况进行调整。

在控制 div 移动时，可以根据碰撞的结果来判断是否允许移动。例如，如果发生碰撞，则禁止移动 div。