Vue3 检测 div 碰撞：使用 Intersection Observer API 获取碰撞方向

在 Vue3 中，你可以使用 Intersection Observer API 来检测两个 div 元素是否发生碰撞，并获取碰撞的方向。

首先，你需要在 Vue 组件的mounted 钩子函数中初始化 Intersection Observer 实例。可以在setup 函数中使用onMounted 函数来实现。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const targetRef = ref(null);
    const collidedRef = ref(false);
    const directionRef = ref('');

    onMounted(() => {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            collidedRef.value = true;
            // 获取碰撞的方向
            const { top, right, bottom, left } = entry.boundingClientRect;
            const { top: rootTop, right: rootRight, bottom: rootBottom, left: rootLeft } = entry.rootBounds;
            if (top > rootTop) {
              directionRef.value = 'top';
            } else if (right < rootRight) {
              directionRef.value = 'right';
            } else if (bottom < rootBottom) {
              directionRef.value = 'bottom';
            } else if (left > rootLeft) {
              directionRef.value = 'left';
            }
          } else {
            collidedRef.value = false;
            directionRef.value = '';
          }
        });
      });

      observer.observe(targetRef.value);

      return () => {
        observer.disconnect();
      };
    });

    return {
      targetRef,
      collidedRef,
      directionRef,
    };
  },
};

然后，在模板中使用ref 绑定到要检测碰撞的 div 元素上，并根据collidedRef 和directionRef 的值来展示相关的内容。

<template>
  <div>
    <div ref="targetRef" class="target-div"></div>
    <div :class="{ 'collision-div': collidedRef }">
      <p v-if="collidedRef">发生碰撞</p>
      <p v-if="collidedRef">{{ directionRef }}方向发生碰撞</p>
    </div>
  </div>
</template>

在上面的代码中，targetRef 是一个ref，它绑定到要检测碰撞的 div 元素上。collidedRef 用于判断是否发生碰撞，directionRef 用于获取碰撞的方向。

请注意，上述代码仅适用于检测一个 div 与多个 class 属性 div 之间的碰撞。如果你需要检测更多 div 之间的碰撞，你可以创建多个 Intersection Observer 实例并分别检测碰撞。