VueUse - 判断元素是否进入视口区域 - useIntersectionObserver

函数名 - useIntersectionObserver

• 作用：
  • 响应式监听目标元素的可见性。
  • 可以去判断某个元素是否进入了视口区域；
• 缺点：该事件对元素的监听一直存在，除非手动停止；
  • 解决：该函数的返回值中有个 stop 函数，可以去停止这个监听；

使用

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup () {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      // 要监听的元素
      target，
      // isIntersecting - 布尔值 - 是否进入视口区域
      ([{ isIntersecting }]) => {
        if(isIntersecting) {
            // 相关逻辑
            // 逻辑处理成功之后，停止对元素的监听
            stop();
        }
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}