vue3 VueUse useElementVisibility 来监听某一个元素或者div是否在当前视口viewport中可见。

1、先上一个图:

2、安装@vueuse/core

pnpm add @vueuse/core

3、新建一个组件:

<script setup lang="ts">
import { ref, watch } from "vue";
import { useElementVisibility } from "@vueuse/core";const target = ref(null);
const targetIsVisible = useElementVisibility(target);
let emit = defineEmits(["showVisible"]);watch(targetIsVisible, (newValue) => {if (newValue) {emit("showVisible",newValue);} else {emit("showVisible",newValue);}
});
</script><template><div ref="target"><h1>Hello world</h1></div>
</template>

这里面是利用@vueuse/core提供的useElementVisibility,来监听ref=”target"的可见状态。然后我们用watch去监听这个属性的变化,然后汇报给App.vue。

4、引用刚建的组件到App.vue

这样我们就可以成功的去看这个div是不是在viewport可见范围了。

官网:

useElementVisibility | VueUse

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

备考MS office 二级

word 1、分页符 布局-分隔符-分节符-下一页&#xff1a;第二张可以不同纸张大小、方向等 2、调整宽度&#xff1a;新文字宽度&#xff08;字符宽度&#xff09; 中文版式 3、字符间距 4、文本转换为表格 1、把 || 替换为逗号&#xff0c;方便查找 5、首字下沉 插入 - 首字下沉…

便宜好用的云手机盘点

云手机作为一种新型远程计算服务&#xff0c;凭借其便利性、高效性和可扩展性&#xff0c;迅速成为了用户的热门选择。然而&#xff0c;面对市场上众多的云手机品牌&#xff0c;如何选择一款性价比高且体验良好的云手机&#xff1f;本文将为您盘点几款便宜好用的云手机产品。 雷…

Avalonia 播放 VLC 视频(Windows / Linux)

【演示效果】 一、开发步骤 1. 版本与引用类库 Avalonia 版本:11.0.11 Windows上只需要安装以下类库: LibVLCSharp 3.8.5 LibVLCSharp.Avalonia 3.8.5 VideoLAN.LibVLC.Windows 3.0.20 引用截图: 2. 前端代码 <UserControl xmlns="https://github.com/avaloni…

windows手工杀毒-寻找可疑进程之进程模块

上篇回顾&#xff1a;windows手工杀毒-寻找可疑进程之进程启动文件-CSDN博客 上篇我们介绍了如何通过进程启动文件寻找可疑进程&#xff0c;首先我们查看文件的数字签名&#xff0c;如果签名是合法的&#xff0c;且是正规公司的证书。基本可疑排除进程是可疑进程&#…

pnpm国内源设置

一、背景 在国内使用pnpm时&#xff0c;由于网络问题&#xff0c;经常会遇到速度慢或无法访问的问题。为了提高效率&#xff0c;可以将pnpm的源设置为国内的镜像源。以下是一些常用的国内pnpm镜像源以及如何设置它们的方法。 二、国内可用源 2.1 淘宝pnpm源 https://registry…

【全网最全】2024年数学建模国赛B题保奖思路+成品论文+matlab/python代码等(后续会更新

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击末文的卡片&#xff0c;那是获取资料的入口&#xff01; 一、问题重述 本题聚焦于某电子产品制造企业在生产过程中的决策问题。企业在生产中需采购 和使用两种关键零配件&#xff0c;并在装配过程中面临如何优化质…

2024年全国大学生数学建模竞赛(C题) 建模解析|农作物的种植策略|小鹿学长带队指引全代码文章与思路

我是鹿鹿学长&#xff0c;就读于上海交通大学&#xff0c;截至目前已经帮200人完成了建模与思路的构建的处理了&#xff5e; 本篇文章是鹿鹿学长经过深度思考&#xff0c;独辟蹊径&#xff0c;实现综合建模。独创复杂系统视角&#xff0c;帮助你解决国赛的难关呀。 完整内容可以…

SpringBoot依赖之Spring Boot DevTools热部署开发增效工具

摘要&#xff1a;Spring项目又大又重&#xff0c;依赖多&#xff0c;编译启动慢&#xff0c;怎么提高研发效率呢&#xff1f;方法之一热部署&#xff01; 概念 Spring Boot DevTools 依赖名称: Spring Boot DevTools功能描述: Provides fast application restarts, LiveRelo…

Milvus 向量数据库进阶系列丨构建 RAG 多租户/多用户系统 (下)

本系列文章介绍 在和社区小伙伴们交流的过程中&#xff0c;我们发现大家最关心的问题从来不是某个具体的功能如何使用&#xff0c;而是面对一个具体的实战场景时&#xff0c;如何选择合适的向量数据库解决方案或最优的功能组合。在 “Milvus 向量数据库进阶” 这个系列文章中&a…

天润融通解开售后维修的成本枷锁,提高维修服务效率

如今&#xff0c;企业客户服务在开展业务咨询和售后受理时&#xff0c;主要方式还是通过电话与在线方式进行。这种方式虽然方便&#xff0c;但是对于一些非常紧急的情况还是显得有些不够。 比如&#xff0c;虽然现在许多企业APP已经实现了一键咨询和一键报修&#xff0c;但当客…

cuda编程[1]:一二三维网格和块的核函数

目录 前言核函数一维二维三维结果分析 前言 所有的代码下载链接&#xff1a;code。以下代码展示了如何在 CUDA 中打印网格和线程的索引信息。代码包括一维、二维和三维的网格和块的设置&#xff0c;并定义了多个内核函数来输出当前的索引信息。 核函数 打印线程索引 __gl…

[MOCO v3] An Empirical Study of Training Self-Supervised Vision Transformers

1、目的 探索基于contrastive/Siamese范式&#xff08;而非masked auto-encoding范式&#xff09;和ViT结构&#xff08;而非卷积网络&#xff09;的自监督学习 2、方法 MoCo v3 ​​​​​​​ 1&#xff09;random data augmentation 2&#xff09;query encoder &a…

shell 学习笔记:数组

目录 1. 定义数组 2. 读取数组元素值 3. 关联数组 4. 在数组前加一个感叹号 ! 可以获取数组的所有键 5. 在数组前加一个井号 # 获取数组的长度 6. 数组初始化的时候&#xff0c;也可以用变量 7. 循环输出数组的方法 7.1 for循环输出 7.2 while循环输出 7.2.1 …

数据结构与算法 第10天(图的应用)

一、最小生成树 生成树&#xff1a;所有顶点均由边连接在一起&#xff0c;但不存在回路 一个图可以有多颗不同的生成树 生成树特点&#xff1a;生成树的顶点个数与图的顶点个数相同; 生成树是图的极小连通子图&#xff0c;去掉一条边则非连通, 一个有 n个顶点的连通图的生成…

idea插件开发之bean复制插件

背景 周末在家无事做&#xff0c;顺手开发了一个之前一直想要做的插件&#xff0c;那就是bean复制插件。 在项目中&#xff0c;由于代码分层设计&#xff0c;对于同样一个数据我们通常会定义不同层的实体&#xff0c;例如xxxEntity、xxxDTO、xxxVO等&#xff0c;这些不同的实…

自然语言处理-词向量转换

文章目录 一、简介1.含义2.基本原理3.常见转换方法1&#xff09;. 独热编码&#xff08;One-Hot Encoding&#xff09;2&#xff09;. 词袋模型&#xff08;Bag of Words, BoW&#xff09;3&#xff09;. TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xf…

Java IO异常处理:在Web爬虫开发中的实践

在当今的互联网时代&#xff0c;Web爬虫技术已经成为数据采集的重要手段之一。它们能够自动地从网页中提取信息&#xff0c;为数据分析、搜索引擎优化、内容聚合等提供了强大的支持。然而&#xff0c;Web爬虫在执行过程中可能会遇到各种输入/输出&#xff08;IO&#xff09;异常…

产品图片小程序开发:全方位指导,让产品展示更出色

想要快速开发并上线一个展示产品图片的小程序吗&#xff1f;乔拓云平台是您的理想选择。只需简单几步&#xff0c;即可打造专属的小程序平台。 首先&#xff0c;访问乔拓云官方网站&#xff0c;注册并登录您的账号。在小程序后端&#xff0c;您可以自由探索丰富的模板库&#x…

Tomato靶机通关攻略

步骤一&#xff1a;进行端口扫描&#xff0c;找寻靶机地址 步骤二&#xff1a;访问靶机地址 步骤三&#xff1a;利用dirb进行扫描 得出&#xff1a;/antibot_image/进行访问 步骤四&#xff1a;进入antibots->info.php->右击进入页面源代码->发现存在文件包含漏洞 步…

猫咪浮毛引起呼吸问题?希喂、小米、有哈宠物空气净化器性能对比

相信每个铲屎官都会碰到猫咪掉毛的问题&#xff0c;掉落堆积的猫毛除了带来的清扫负担&#xff0c;还存在着极大的健康隐患。毛发主要分为两种&#xff0c;大颗粒的猫毛可以被我们肉眼所看见&#xff0c;通常会沉在地面上、床上。这类猫毛我们可以用粘毛器、吸尘器等工具进行清…