Vue实践篇：如何在 Vue 项目中检测元素是否展示

前言

在现代前端开发中，了解页面元素的可见性是至关重要的。例如，我们可能希望在用户滚动到特定部分时加载更多内容，或者在元素进入视口时触发动画效果。尽管 Vue.js 并没有直接提供监听元素可见性的 API，但我们可以巧妙地利用 JavaScript 的 Intersection Observer API 与 Vue 的自定义指令相结合，来实现这一功能。
本文将详细介绍如何通过这种方法在 Vue 项目中监听元素的可见性，并探讨一些高级用法和优化技巧。

什么是 Intersection Observer？

Intersection Observer 是一个浏览器原生的 API，用于异步观察目标元素与其祖先元素或顶部视口之间的交叉状态变化。简单来说，它可以告诉你一个元素何时进入或离开视口。

实现步骤

  1. 创建自定义指令
  2. 使用 Intersection Observer
  3. 在 Vue 组件中使用自定义指令

1. 创建自定义指令

首先，我们需要创建一个 Vue 自定义指令，用于绑定到我们想要监听的元素上。这个指令会使用 Intersection Observer 来检测元素的可见性。

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const options = {
      root: null, // 使用视口作为根
      threshold: 0.1 // 当至少 10% 的元素在视口中时触发回调
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value(true); // 元素可见时，调用传入的回调函数
        } else {
          binding.value(false); // 元素不可见时，调用传入的回调函数
        }
      });
    }, options);

    observer.observe(el);
  }
};

2. 注册自定义指令

接下来，我们需要在 Vue 应用中注册这个自定义指令。

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import vVisible from './directives/v-visible';

Vue.directive('visible', vVisible);

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 在 Vue 组件中使用自定义指令

现在我们可以在任意 Vue 组件中使用这个自定义指令来监听元素的可见性。我们将通过一个简单的例子来展示如何使用。

<template>
  <div>
    <div v-visible="handleVisibilityChange" class="box">
      观察我是否在视口中
    </div>
  </div>
</template>

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

<style>
.box {
  margin-top: 100vh; /* 确保元素初始不可见 */
  height: 100px;
  background-color: lightblue;
}
</style>

进阶用法

1. 配置自定义指令的可选参数

在实际应用中，我们可能需要自定义观察器的行为，例如设置不同的阈值或根元素。我们可以通过指令的绑定值传递这些参数。

修改后的自定义指令如下：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true);
        } else {
          binding.value.callback(false);
        }
      });
    }, options);

    observer.observe(el);
  }
};

在组件中使用时，我们可以传递更多的参数：

<template>
  <div>
    <div 
      v-visible="{ 
        callback: handleVisibilityChange, 
        options: { threshold: 0.5 } 
      }" 
      class="box">
      观察我是否在视口中
    </div>
  </div>
</template>

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

2. 解绑监听器

为了避免内存泄漏，我们应该在元素被卸载时取消监听。Vue 提供了 unbind 钩子，我们可以在这个钩子中停止观察。

完善的自定义指令如下：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true);
        } else {
          binding.value.callback(false);
        }
      });
    }, options);

    observer.observe(el);
    el._observer = observer; // 将 observer 实例存储在元素上
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect(); // 取消监听
      delete el._observer;
    }
  }
};

3. 支持重复使用

有时我们希望同一个回调函数可以被多个元素共享，而不每次都创建新的函数。我们可以进一步优化指令的定义。

<template>
  <div>
    <div 
      v-visible="visibilityHandler" 
      class="box">
      观察我是否在视口中
    </div>
    <div 
      v-visible="visibilityHandler" 
      class="box">
      我也是
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    visibilityHandler(isVisible, el) {
      if (isVisible) {
        console.log(`${el} 元素可见！`);
      } else {
        console.log(`${el} 元素不可见！`);
      }
    }
  }
};
</script>

修改指令以支持回调传递元素本身：

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true, el);
        } else {
          binding.value.callback(false, el);
        }
      });
    }, options);

    observer.observe(el);
    el._observer = observer;
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  }
};

4. 处理复杂场景

对于更复杂的场景，例如需要在某些特殊情况下暂停和恢复观察，我们可以进一步增强我们的指令。例如，可以通过一个 pause 参数动态控制观察器的工作。

// src/directives/v-visible.js

export default {
  inserted(el, binding) {
    const defaultOptions = {
      root: null,
      threshold: 0.1
    };

    const options = Object.assign(defaultOptions, binding.value.options || {});
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          binding.value.callback(true, el);
        } else {
          binding.value.callback(false, el);
        }
      });
    }, options);

    el._observer = observer;

    if (!binding.value.pause) {
      observer.observe(el);
    }
  },
  update(el, binding) {
    if (binding.value.pause && el._observer) {
      el._observer.unobserve(el);
    } else if (!binding.value.pause && el._observer) {
      el._observer.observe(el);
    }
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  }
};

在组件中动态控制观察器：

<template>
  <div>
    <div v-visible="{ callback: handleVisibilityChange, pause: isPaused }" class="box">
      观察我是否在视口中
    </div>
    <button @click="isPaused = !isPaused">
      {{ isPaused ? '恢复观察' : '暂停观察' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPaused: false
    };
  },
  methods: {
    handleVisibilityChange(isVisible, el) {
      if (isVisible) {
        console.log('元素可见！');
      } else {
        console.log('元素不可见！');
      }
    }
  }
};
</script>

总结

通过以上的示例和优化技巧，我们可以看到，Vue 自定义指令结合 Intersection Observer 能够非常灵活地实现监视元素可见性的功能。这种方法不仅简单易行，而且性能优越，适用于各种复杂场景。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/920302.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Jenkins迁移数据目录

Jenkins迁移数据目录

查看当前容器挂载的目录 [roottest-server01 ~]# docker inspect -f "{{.Mounts}}" jenkins [{bind /etc/localtime /etc/localtime true rprivate} {bind /opt/jenkins_data /var/jenkins_home true rprivate}]复制数据目录到数据盘 [roottest-server01 opt…
阅读更多...
利用 TensorFlow Profiler：在 AMD GPU 上优化 TensorFlow 模型

利用 TensorFlow Profiler：在 AMD GPU 上优化 TensorFlow 模型

TensorFlow Profiler in practice: Optimizing TensorFlow models on AMD GPUs — ROCm Blogs 简介 TensorFlow Profiler 是一组旨在衡量 TensorFlow 模型执行期间资源利用率和性能的工具。它提供了关于模型如何与硬件资源交互的深入见解&#xff0c;包括执行时间和内存使用情…
阅读更多...
二叉树——输出叶子到根节点的路径

二叉树——输出叶子到根节点的路径

目录 代码 算法思想 例子 思维拓展 代码 int LeaveBit(Bitree T,int flag,int g) {if (!T) {return 0;}if (T->rchild NULL && T->lchild NULL) {//cout << "empty:" << T->data << endl;s.push(T->data);while (!s.emp…
阅读更多...
PIL学习---彩色RGB图像按通道输出

PIL学习---彩色RGB图像按通道输出

要将 RGB 图像拆分为单独的 R、G、B 通道并分别展示&#xff0c;可以通过 PIL 中的 split() 方法将图像的三个通道分开&#xff0c;并使用 matplotlib 来显示每个通道的图像。效果如下图所示&#xff1a; 代码部分&#xff1a; from PIL import Image import matplotlib.pypl…
阅读更多...
CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

HTML 结构解析 文档结构: <ul class"con">: 一个无序列表&#xff0c;包含多个列表项。 每个 <li class"wrap"> 表示一个列表项&#xff0c;内部有两个 <span> 元素&#xff1a; <span class"txt">: 显示文本内容。<…
阅读更多...
ROS VRRP软路由双线组网方式

ROS VRRP软路由双线组网方式

虚拟路由冗余协议 Virtual Router Redundancy Protocol (VRRP)&#xff0c;MikroTik RouteROS VRRP 协议遵循 RFC 2338。 VRRP 协议是保证访问一些资源不会中断&#xff0c;即通过多台路由器组成一个网关集合&#xff0c;如果其中一台路由器出现故障&#xff0c;会自动启用另外…
阅读更多...
设计编程网站集：简述可扩展性系统设计(笔记)

设计编程网站集：简述可扩展性系统设计(笔记)

视频连接&#xff1a;简述可扩展性系统设计 三个关键原则 无状态 松散耦合 异步处理 扩展 负载均衡 缓存 分片
阅读更多...
openCV与eigen两种方法---旋转向量转旋转矩阵

openCV与eigen两种方法---旋转向量转旋转矩阵

#include <Eigen/Dense> #include <opencv2/core/eigen.hpp> #include <opencv2/opencv.hpp> using namespace cv; using namespace std; int main() {// opencv 旋转向量cv::Vec3d rvec(1.0, 2.0, 3.0);cv::Mat rotation_matrix;cv::Rodrigues(rvec, rotati…
阅读更多...
卷积运算和卷积定理

卷积运算和卷积定理

卷积运算 卷积运算是信号处理、图像处理和深度学习中的核心概念&#xff0c;用于表示两个函数之间的相互作用。它将一个函数通过滑动窗口的方式与另一个函数结合&#xff0c;产生一个新的函数&#xff0c;反映两者的重叠程度。 1. 定义 连续信号的卷积&#xff1a; 给定两个连…
阅读更多...
【板间连接器焊接】

【板间连接器焊接】

一、背景 近期工作需要，用到了AX7Z020核心板（黑金），官网链接：https://www.alinx.com/detail/271。 板子打好之后，遇到了焊接问题。对自身焊接技术还是比较自信的，直接上去焊接了2个连接器。拖锡搞了3小时后，放弃了。热风枪1分钟不到就把连接器吹下来了，看引脚90%都是…
阅读更多...
低代码开发平台搭建思考与实战

低代码开发平台搭建思考与实战

什么是低代码开发平台&#xff1f; 低代码开发平台是一种平台软件&#xff0c;人们能通过它提供的图形化配置功能&#xff0c;快速配置出满足各种特定业务需求的功能软件。 具有以下特点&#xff1a; 提供可视化界面进行程序开发0代码或少量代码快速生成应用 什么是低代码产…
阅读更多...
React Native 基础

React Native 基础

React 的核心概念 定义函数式组件 import组件 要定义一个Cat组件，第一步要使用 import 语句来引入React以及React Native的 Text 组件： import React from react; import { Text } from react-native; 定义函数作为组件 const CatApp = () => {}; 渲染Text组件
阅读更多...
ftdi_sio应用学习笔记 3 - GPIO

ftdi_sio应用学习笔记 3 - GPIO

目录 1. 查找gpiochip 2. 打开GPIO 2.1 libgpiod库方式 2.2 系统方式 3. 关闭GPIO 3.1 libgpiod库方式 3.2 系统方式 4. 设置方向 4.1 libgpiod库方式 4.2 系统方式 5. 设置GPIO电平 5.1 libgpiod库方式 5.2 系统方式 6. 读取GPIO电平 6.1 libgpiod库方式 6.2 …
阅读更多...
微信小程序登录注册页面设计（小程序项目）

微信小程序登录注册页面设计（小程序项目）

需求 在微信小程序设计并实现登录页面&#xff0c;并填写相关登录注册函数 实现效果 代码实现 html代码 <view class"top" style"border-bottom-style: none;background-color:#FF8C69;"><!-- <view class"back" bind:tap"…
阅读更多...
神经网络（系统性学习三）：多层感知机（MLP）

神经网络（系统性学习三）：多层感知机（MLP）

相关文章&#xff1a; 神经网络中常用的激活函数 神经网络&#xff08;系统性学习一&#xff09;&#xff1a;入门篇 神经网络&#xff08;系统性学习二&#xff09;&#xff1a;单层神经网络&#xff08;感知机&#xff09; 多层感知机&#xff08;MLP&#xff09; 多层感…
阅读更多...
Android 14 screenrecord录制视频失败的原因分析

Android 14 screenrecord录制视频失败的原因分析

文章目录 1. 权限问题2. 存储空间不足3. 命令被中断4. 目标路径问题5. Android 14 的新限制6. 文件系统同步问题7. 录制失败检查步骤总结&#xff1a; 在 Android 14 系统上&#xff0c;使用 screenrecord 命令录制视频后&#xff0c;生成的文件大小为 0&#xff0c;可能的原因…
阅读更多...
Uniapp 简单配置鸿蒙

Uniapp 简单配置鸿蒙

Uniapp 简单配置鸿蒙 前言下载并配置鸿蒙IDEHbuilder X 配置基本的信息生成相关证书登录官网获取证书IDE配置证书添加调试设备可能出现的问题前言 如今鸿蒙的盛起，作为多端开发的代表也是开始兼容鸿蒙应用的开发，接下来我将介绍如何在uniapp中配置鸿蒙。 注意：hbuilder X的…
阅读更多...
git使用（一）

git使用（一）

git使用&#xff08;一&#xff09; 为什么学习git?两种版本控制系统在github上创建一个仓库&#xff08;repository&#xff09;windows上配置git环境在Linux上配置git环境 为什么学习git? 代码写了好久不小心删了&#xff0c;可以使用git防止&#xff0c;每写一部分代码通…
阅读更多...
C# 数据结构之【树】C#树

C# 数据结构之【树】C#树

以二叉树为例进行演示。二叉树每个节点最多有两个子节点。 1. 新建二叉树节点模型 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace DataStructure {class TreeNode{public int Data { get;…
阅读更多...
HarmonyOs鸿蒙开发实战(20)=＞一文学会基础使用组件导航Navigation

HarmonyOs鸿蒙开发实战(20)=＞一文学会基础使用组件导航Navigation

敲黑板&#xff0c;以下是重点技巧。文章末尾有实战项目效果截图及代码截图可参考 1.概要 Navigation是路由导航的根视图容器Navigation组件主要包含​导航页&#xff08;NavBar&#xff09;和子页&#xff08;NavDestination&#xff09;&#xff0c;导航页不存在页面栈中&am…
阅读更多...
最新文章

Copyright @ 2022~2023