Vue如何实现鼠标悬浮时,展示与隐藏弹窗的功能

如果你需要鼠标在元素和弹窗上时保持弹窗显示,而鼠标离开这两者时隐藏弹窗,你可以使用一个稍微复杂的逻辑来处理鼠标的进入和离开事件。

这通常涉及到延时关闭弹窗,以便给用户足够的时间从元素移动到弹窗上,而不触发弹窗关闭。以下是一个实现的例子:(这个例子简单,效果还非常好)

<template><div><!-- 悬停目标元素 --><div @mouseenter="delayedOpen" @mouseleave="delayedClose">悬停我查看弹窗</div><!-- 弹窗元素 --><div v-if="isPopupVisible"@mouseenter="clearCloseTimeout"@mouseleave="delayedClose"class="popup">这是弹窗内容</div></div>
</template><script>
export default {data() {return {isPopupVisible: false,closeTimeout: null,};},methods: {delayedOpen() {this.clearCloseTimeout();this.isPopupVisible = true;},delayedClose() {// 设置一个延时,给用户时间移动到弹窗上this.closeTimeout = setTimeout(() => {this.isPopupVisible = false;}, 300); // 延时300毫秒关闭},clearCloseTimeout() {// 清除已设定的延时关闭,防止弹窗意外关闭if (this.closeTimeout) {clearTimeout(this.closeTimeout);this.closeTimeout = null;}}}
};
</script><style>
.popup {position: absolute;width: 200px;height: 100px;background-color: white;border: 1px solid #ccc;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);padding: 10px;
}
</style>

功能解释

  • delayedOpen 方法用于立即显示弹窗,同时清除之前可能设置的关闭延时。
  • delayedClose 方法设置一个延时,允许用户有足够的时间将鼠标从悬停元素移动到弹窗上。
  • clearCloseTimeout 方法用于取消已设置的延时关闭,这通常在鼠标从元素移到弹窗上时调用。

通过这种方法,弹窗能够在鼠标悬停在触发元素和弹窗本身上时保持显示,并且在鼠标离开这些区域后,经过一个短暂的延时后自动关闭。这为用户提供了更自然的交互体验。

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

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

相关文章

【论文解读】Performance of AV1 Real-Time Mode

论文下载地址:Performance of AV1 Real-Time Mode 时间:2020.10 级别:IEEE 作者:Ludovic Roux 摘要 背景:COVID-19疫情增加了对数字互动的需求,使得实时或低延迟编解码器变得更加重要。现状:大多数编解码器,包括AV1,主要关注于编码效率,这是视频点播(VOD)的主要改…

授人以渔 选购篇十四:电动车(电动自行车)选购要点

文章目录 系列文章新国标和上牌电池&#xff1a;锂电池电机&#xff1a;无刷直流电机刹车&#xff1a;优选前后双碟刹轮胎&#xff1a;真空轮胎品牌其他 系列文章 授人以渔 选购篇一&#xff1a;信用卡选购要点 授人以渔 选购篇二&#xff1a;冰箱选购要点 授人以渔 选购篇三&…

【传知代码】私人订制词云图-论文复现

文章目录 概述原理介绍核心逻辑1、选取需要解析的txt文档2、选取背景图明确形状3、配置停用词4、创建分词词典&#xff0c;主要解决新的网络热词、专有名词等不识别问题 技巧1、中文乱码问题&#xff0c;使用的时候指定使用的文字字体2、更换背景图3、词库下载以及格式转换方式…

多线程编程(12)之HashMap1.8源码分析

之前已经分析过了一版1.7版本的HashMap&#xff0c;这里主要是来分析一下1.8HashMap源码。 一、HashMap数据结构 HashMap 是一个利用散列表&#xff08;哈希表&#xff09;原理来存储元素的集合&#xff0c;是根据Key value而直接进行访问的数 据结构。 在 JDK1.7 中&#xff…

内网穿透端口映射内外网反弹 shell 回顾

内网穿透&端口映射&内外网反弹 shell 回顾 内网概念 我们常说的内网&#xff0c;一般指的是非公有 IPv4 地址的网络比如学校机房里的电脑一般为私有网络&#xff0c;家里的网络也是私有网络 私有网络的范围与划分 ipaddressareaA 类地址10.0.0.0&#xff5e;10.255.…

521源码-免费下载-WordPress全能自动采集与发布插件 – WP-AutoPostPro 汉化版

更多网站源码学习教程&#xff0c;请点击&#x1f449;-521源码-&#x1f448;获取最新资源 本工具下载地址&#xff1a;WordPress全能自动采集与发布插件 – WP-AutoPostPro 汉化版 - 521源码 WP-AutoPostPro是一款出类拔萃的WordPress自动采集发布插件&#xff0c;凭借其卓…

Yolov5保姆及入门-含源码【推荐】

前言 YOLO系列模型作为一种实时目标检测算法&#xff0c;自从YOLO1发布以来&#xff0c;就以其检测速度快、准确率高而受到广泛关注。随着技术的迭代&#xff0c;YOLO系列已经发展到了YOLO8。本文将详细介绍YOLO5的技术规格、应用场景、特点以及性能对比。 yolov5源码下载地址…

Oracle 创建DBLink

一、查询是否具有创建DBLink的权限select * from user_sys_privs where privilege like upper(%DATABASE LINK%); 二、如果没有&#xff0c;则需要使用 sysdba 角色给用户赋权grant create public database link to dbusername; 三、创建dblink -- 如果创建全局 dblink&am…

海外真实机房给云手机上“福利”

不论是做出海跨境方面的业务&#xff0c;大家都不自觉的把目光放在了海外的云手机上&#xff0c;尤其是有直播群控&#xff0c;引流获客这样的一个刚需&#xff0c;只有处在海外真实环境了&#xff0c;那么在一些活动的过程中&#xff0c;才能表现的更稳&#xff0c;而不会触发…

React@16.x(10)HOC高阶组件和横切关注点

目录 1&#xff0c;什么是HOC2&#xff0c;什么是横切关注点2.1&#xff0c;简单理解2.2&#xff0c;常见解决方式 3&#xff0c;HOC 举例3.1&#xff0c;全局功能3.2&#xff0c;小范围使用 4&#xff0c;HOC 使用注意点4.1&#xff0c;不要在 render 中使用4.2&#xff0c;不…

Android --- 交换两个布局

准备布局 exchange_out_layout exchange_in_layout <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"andr…

免费,Python蓝桥杯等级考试真题--第13级(含答案解析和代码)

Python蓝桥杯等级考试真题–第13级 一、 选择题 答案&#xff1a;C 解析&#xff1a;正向下标由0开始&#xff0c;下标3代表第四个元素&#xff0c;故答案为C。 答案&#xff1a;A 解析&#xff1a;range&#xff08;0,4&#xff09;的取前不取后&#xff0c;元组的符号是小括…

【CGAL】Region_Growing 检测平面并保存

目录 说明一、算法原理二、代码展示三、结果展示 说明 本篇博客主要介绍CGAL库中使用Region_Growing算法检测平面的算法原理、代码以及最后展示结果。其中&#xff0c;代码部分在CGAL官方库中提供了例子。我在其中做了一些修改&#xff0c;使其可以读取PLY类型的点云文件&…

可行性研究报告编制参考资料(Word原件-软件全套资料)

1业务需求可行性分析 2技术可行性分析 2.1规范化原则 2.2高度的兼容性和可移植性 2.3人性化、适用性 2.4标准化统一设计原则 2.5先进安全可扩展性原则 3开发周期可行性分析 4人力资源可行性分析 5成本分析 6收益分析 7结论 软件全套精华资料包清单部分文件列表&#xff1a; 工作…

【搭建大语言模型】使用LocalGPT搭建本地大语言模型服务并实现远程访问进行交互

文章目录 前言环境准备1. localGPT部署2. 启动和使用3. 安装cpolar 内网穿透4. 创建公网地址5. 公网地址访问6. 固定公网地址 前言 本文主要介绍如何本地部署LocalGPT并实现远程访问&#xff0c;由于localGPT只能通过本地局域网IP地址端口号的形式访问&#xff0c;实现远程访问…

设计模式15——享元模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 享元模式&#xff08;Flyweigh…

Linux信号:信号的概念及意义

目录 一、什么是信号 kill-l查看信号 二、信号的产生 2.1系统调用 kill raise abort 2.2软件条件 13)SIGPIPE pipe信号 14&#xff09;SIGAKARM alarm信号 2.2硬件中断 2.3异常 8)SIGFPE 除0异常 11)SIGSEGV 野指针 2.4信号处理的常见方式 三、Core Dump和term…

一文详解SaaS增长模式:PLG、MLG、SLG哪种更适合你?

在SaaS&#xff08;软件即服务&#xff09;的领域中&#xff0c;增长策略的选择对于企业的成功至关重要。其中&#xff0c;PLG&#xff08;产品驱动增长&#xff09;、MLG&#xff08;市场驱动增长&#xff09;和SLG&#xff08;销售驱动增长&#xff09;是三种常见的策略&…

Wireshark简介

Wireshark是一款流行的网络协议分析工具&#xff0c;可以捕获和显示网络上传输的数据包的详细信息。以下是Wireshark的基本使用方法&#xff1a; 安装Wireshark 访问Wireshark的官方网站下载适用于您操作系统的版本。按照安装向导完成安装。 打开Wireshark 启动Wireshark程…

Centos 7 安装刻录至服务器

前言 在日常测试中&#xff0c;会遇到很多安装的场景&#xff0c;今天给大家讲一下centos 7 的安装&#xff0c;希望对大家有所帮助。 一.下载镜像 地址如下&#xff1a; centos官方镜像下载地址https://www.centos.org/download/ 按照需求依次点击下载 二.镜像刻录 镜像刻…