Vue3 TypeScript 检测元素碰撞并获取方向

在 Vue 3 和 TypeScript 中，你可以使用 Intersection Observer API 来检测两个元素是否相交（发生碰撞）。然后，通过比较两个元素的位置和大小来确定碰撞的方向。

首先，需要在 Vue 组件的mounted生命周期钩子函数中创建 Intersection Observer 实例，并指定要观察的目标元素：

import { ref, onMounted } from 'vue';

export default {
  mounted() {
    const targetDiv = ref<HTMLElement | null>(null);
    const collisionDivs = ref<HTMLElement[]>([]);

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const isIntersecting = entry.isIntersecting;
        const target = entry.target as HTMLElement;

        if (isIntersecting) {
          // 碰撞发生
          // 检查碰撞的方向
          const targetRect = target.getBoundingClientRect();
          collisionDivs.value.forEach((collisionDiv) => {
            const collisionRect = collisionDiv.getBoundingClientRect();

            if (
              targetRect.top < collisionRect.bottom &&
              targetRect.bottom > collisionRect.top &&
              targetRect.left < collisionRect.right &&
              targetRect.right > collisionRect.left
            ) {
              // 碰撞方向可以根据 targetRect 和 collisionRect 的位置和大小进行判断
              console.log('碰撞发生');
            }
          });
        }
      });
    });

    onMounted(() => {
      observer.observe(targetDiv.value);
    });

    return {
      targetDiv,
      collisionDivs,
    };
  },
};

在上面的代码中，我们创建了一个 Intersection Observer 实例，并在onMounted生命周期钩子函数中调用observe方法来开始观察目标元素。

在IntersectionObserver的回调函数中，我们可以获取到目标元素是否与视口相交（发生碰撞）。如果发生碰撞，我们可以通过getBoundingClientRect()方法获取到目标元素和碰撞元素的位置和大小信息，然后根据这些信息判断碰撞的方向。

注意，上述代码中的targetDiv和collisionDivs是通过 Vue 的响应式引用（ref）创建的，以便在模板中使用。

最后，你可以在模板中使用这些引用和相应的元素来实现你的需求：

<template>
  <div>
    <div ref='targetDiv' class='target-div'></div>
    <div v-for='collisionDiv in collisionDivs' :key='collisionDiv' class='collision-div'></div>
  </div>
</template>

在上面的代码中，我们将目标 div 和碰撞 div 绑定到相应的引用中，并使用v-for指令来渲染多个碰撞 div。

这样，当目标 div 与其中一个碰撞 div 相交时，会打印出'碰撞发生'的消息，并可以根据位置和大小信息判断碰撞的方向。