Vue3 检测两个 div 元素之间的碰撞 | Intersection Observer API 实践

在 Vue3 中，可以使用 `Intersection Observer API` 来检测两个 `div` 元素之间的碰撞。这个 API 提供了一种异步观察目标元素与祖先元素或视口之间交叉状态的方法。

以下是一个示例代码，展示了如何使用 `Intersection Observer API` 来检测两个 `div` 元素之间的碰撞：

<template>
  <div>
    <div ref="div1" style="width: 100px; height: 100px; background-color: red;"></div>
    <div ref="div2" style="width: 100px; height: 100px; background-color: blue;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    };

    const observer = new IntersectionObserver(this.handleIntersection, options);
    observer.observe(this.$refs.div1);
  },
  methods: {
    handleIntersection(entries) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log('div1 and div2 are colliding');
          // 在这里可以处理碰撞后的逻辑
        }
      });
    }
  }
}
</script>

在上述示例中，我们创建了一个 `IntersectionObserver` 实例，并使用 `observe` 方法来开始观察 `div1` 元素。当 `div1` 与祖先元素或视口发生交叉时，会调用 `handleIntersection` 方法。在 `handleIntersection` 方法中，我们可以处理两个 `div` 元素碰撞后的逻辑。

请注意，上述示例中只观察了 `div1` 元素，如果你想要检测 `div1` 和 `div2` 之间的碰撞，你可以通过添加相应的代码来观察 `div2` 元素，然后在 `handleIntersection` 方法中处理碰撞逻辑。