Vue3 碰撞检测 - 使用 Intersection Observer API 检测 div 碰撞

在 Vue3 中，可以使用'Intersection Observer API'来检测一个'div'与其他'div'之间的碰撞。

首先，需要在 Vue 组件中创建一个'Intersection Observer'实例，并将其绑定到要检测碰撞的'div'上。可以使用'ref'来引用'div'元素。

<template>
  <div ref="targetDiv"></div>
</template>

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

export default {
  setup() {
    const targetDiv = ref(null);

    onMounted(() => {
      const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          // 检测碰撞
          if (entry.isIntersecting) {
            console.log('碰撞发生');
          }
        });
      });

      observer.observe(targetDiv.value);
    });

    return {
      targetDiv
    };
  }
};
</script>

然后，可以使用'Intersection Observer'的回调函数来处理碰撞事件。在回调函数中，可以通过'entry.isIntersecting'属性来检查碰撞是否发生。如果'isIntersecting'为'true'，则表示发生了碰撞。

在上述示例中，将会输出'碰撞发生'的提示信息。

需要注意的是，'Intersection Observer'是异步的，因此需要在'onMounted'钩子函数中创建并绑定观察者实例。