《元素视口可见性检测 》Vue自定义指令 封装

结合 Vue 自定义指令和 Intersection Observer API 实现元素视口可见性检测

1. 实现元素可见性检测

知识铺垫

Intersection Observer API 简介

  • 什么是 Intersection Observer API?
    • 它的主要用途:检测元素是否进入视口或与某个父元素相交。
  • 区别于以往的判断元素距离顶部距离和滚动距离,使用Intersection Observer性能更好

Vue 自定义指令基础

  • Vue 自定义指令的基本语法。
  • 生命周期钩子:mountedupdatedunmounted 等。
  • 如何通过 binding 传递参数和值。
  • 代码解析:
    • mounted 钩子中创建 IntersectionObserver 实例。
    • 使用 threshold 控制触发条件。
    • 通过 binding.value 传递回调函数。
    • unmounted 钩子中清理观察器。

2. 开袋即食·代码:

以下封装好的代码可以直接复制,粘贴到项目的任意js文件中

比如我放在 src/utils/diy_directive_visible.js

javascript 复制代码
export default {
  mounted(el, binding) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          binding.value(entry.isIntersecting);
        });
      },
      {
        threshold: 0.5, // 50%可见时触发
        rootMargin: "0px",
      },
    );
    observer.observe(el);
    el._observer = observer;
  },
  unmounted(el) {
    el._observer?.disconnect();
  },
};

在你的main.js中,进行导入和全局注册

javascript 复制代码
import visible from "./utils/diy_directive_visible.js"  // 导入自己配置的指令
....省略部分内容
const app = createApp(App)
app.directive("visible", visible) //  注册自己配置的指令
....省略部分内容
app.mount("#app")

组件中的使用示例

html 复制代码
<template>
  <div v-visible="handleVisibility">滚动到这里看看!</div>
</template>

<script>
export default {
  methods: {
    handleVisibility(isVisible) {
      if (isVisible) {
        console.log('元素可见!');
      } else {
        console.log('元素不可见!');
      }
    },
  },
};
</script>

3. 补充说明

可用使用的场景

  • 懒加载图片或组件。
  • 无限滚动列表。
  • 动画触发条件。
  • 数据埋点(如曝光统计)。

优化与扩展

  • 动态调整 thresholdrootMargin
  • 处理多个元素的可见性检测。
  • 结合 Vue 的响应式系统实现更复杂的功能。

注意事项

  • 兼容性问题:IntersectionObserver 的浏览器支持情况。
  • 性能优化:避免过度使用观察器。
  • 清理资源:确保在组件销毁时断开观察器。
相关推荐
萌萌哒草头将军3 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中3 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊4 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿4 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj4 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝4 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3114 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion4 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜4 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾4 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css