VueUse 学习 —— useElementVisibility`useElementVisibility` 是 Vu

useElementVisibility 是 Vueuse 库中的一个钩子函数，用于跟踪元素在视口中的可见性。

用法

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useElementVisibility } from '@vueuse/core'

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

    return {
      target,
      targetIsVisible,
    }
  }
}
</script>

组件式用法

<UseElementVisibility v-slot="{ isVisible }">
  Is Visible: {{ isVisible }}
</UseElementVisibility>

指令式用法

<script setup lang="ts">
import { ref } from 'vue'
import { vElementVisibility } from '@vueuse/components'

const target = ref(null)
const isVisible = ref(false)

function onElementVisibility(state) {
  isVisible.value = state
}
</script>

<template>
  <div v-element-visibility="onElementVisibility">
    {{ isVisible ? 'inside' : 'outside' }}
  </div>

  <!-- with options -->
  <div ref="target">
    <div v-element-visibility="[onElementVisibility, { scrollTarget: target }]">
      {{ isVisible ? 'inside' : 'outside' }}
    </div>
  </div>
</template>

源码分析

源码地址

使用 Intersection Observer 监测元素的可见性：通过使用 useIntersectionObserver 钩子函数，它会创建一个 Intersection Observer 实例来观察目标元素与视口的交叉情况。当目标元素进入或离开视口时，会触发回调函数。
提供元素可见性的响应式属性：useElementVisibility 返回一个具有响应式属性 elementIsVisible 的引用对象。当目标元素进入或离开视口时，elementIsVisible 的值会自动更新，反映目标元素当前是否可见。
支持自定义配置选项：可以通过 window 参数指定使用的窗口对象，默认为浏览器的全局 window 对象。另外，还可以通过 scrollTarget 参数指定要用作滚动容器的元素。这允许我们监测元素在指定滚动容器内的可见性。

useElementVisibility 提供了一种方便的方式来跟踪元素在视口中的可见性，并通过响应式属性使其在 Vue 组件中可用。这对于需要根据元素可见性来触发某些操作或动态调整组件行为的情况非常有用。