<el-tooltip:disabled="isScrolling" <!-- 新增滚动状态绑定 -->:popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false }] }"effect="dark":content="label.name"placement="right-start"popper-class="no-transition" <!-- 新增自定义类名 -->
><!-- 原有内容保持不变 -->
</el-tooltip><style>
/* 禁用过渡动画 */
.no-transition .el-tooltip__popper {transition: none !important;
}
</style>
// 在组件中
import { ref, onMounted, onUnmounted } from 'vue'const isScrolling = ref(false)
let scrollTimer = nullconst handleScroll = () => {isScrolling.value = trueclearTimeout(scrollTimer)scrollTimer = setTimeout(() => {isScrolling.value = false}, 100) // 滚动停止后 100ms 恢复
}onMounted(() => {window.addEventListener('scroll', handleScroll, true)
})onUnmounted(() => {window.removeEventListener('scroll', handleScroll, true)
})
优化 Popper 配置(可选)
<el-tooltip:popper-options="{modifiers: [{name: 'eventListeners',options: {scroll: false // 关闭滚动监听(需手动控制)}}]}"
>
  1. 禁用动画
    • 通过 transition: none 消除 CSS 过渡动画
    • 使用 popper-class 避免全局样式污染
  2. 滚动状态控制
    • 滚动时通过 isScrolling 禁用 Tooltip
    • 滚动结束后 100ms 恢复(可根据实际效果调整时间)
  3. Popper 配置优化
    • adaptive: false 禁用自动位置适应
    • 关闭内置滚动监听避免冲突

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

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

相关文章

【经典面经】C++新特性 TCP完整收发数据 TLS1.2 TLS1.3

文章目录cpp新特性C11C14C17C20tcp如何保证完整收发数据结论1. **面向连接的三次握手**2. **字节序号与确认机制**3. **校验和&#xff08;Checksum&#xff09;**4. **超时重传与快速重传**5. **滑动窗口&#xff08;流量控制&#xff09;**6. **数据重组与排序**7. **四次挥手…

Spring AI 系列之十一 - RAG-进阶RetrievalAugmentationAdvisor

之前做个几个大模型的应用&#xff0c;都是使用Python语言&#xff0c;后来有一个项目使用了Java&#xff0c;并使用了Spring AI框架。随着Spring AI不断地完善&#xff0c;最近它发布了1.0正式版&#xff0c;意味着它已经能很好的作为企业级生产环境的使用。对于Java开发者来说…

[TOOL] ubuntu 使用 ffmpeg 操作 gif、mp4

文章目录一、工具安装二、gif 转mp4三、mp4 两倍速一、工具安装 安装 ffmpeg 工具&#xff1a; sudo apt install ffmpeg二、gif 转mp4 1. 配置环境 核心指令: ffmpeg -i input.mp4 -filter_complex "[0:v]setpts0.5*PTS[v];[0:a]atempo2.0[a]" -map "[v]&q…

linux中INIT_MM_CONTEXT宏对pgd的重复赋值

在GNU C中&#xff0c;支持通过标号元素对指定结构体成员名进行初始化&#xff0c;这允许初始化值以任意顺序出现。在linux内核中对init_mm初始化时有如下代码。#define INIT_MM_CONTEXT(name) \.pgd init_pg_dir,struct mm_struct init_mm {.mm_rb RB_ROOT,.pgd swapper…

第十五章 STL(stack、queue、list、set、map容器使用)

栈stack使用&#xff1a;队列queue双向循环链表listlist构造函数list 赋值和交换list 大小操作list 插入和删除list 数据存取list 反转和排序排序算法sort降序操作排序案例#include<iostream> using namespace std; #include<list>class Person { private:string n…

【论文阅读】HCCF:Hypergraph Contrastive Collaborative Filtering

论文出处&#xff1a;SIGIR 2022 CCF-A 论文地址&#xff1a;Hypergraph Contrastive Collaborative Filtering 论文代码&#xff1a;akaxlh/HCCF: HCCF, SIGIR 2022 目录 摘要 介绍 研究背景与核心问题 现有方法局限性 HCCF的创新解决方案 技术优势 定义与相关工作 …

Retrofit+RxJava:打造声明式REST客户端的艺术 —— 像点咖啡一样调用API

目录一、告别Callback地狱&#xff1a;声明式编程的魅力1.1 传统网络请求的痛点1.2 Retrofit的声明式革命二、Retrofit核心配置工厂2.1 构建Retrofit实例2.2 常用注解速查表三、RxJava响应式魔法3.1 链式调用优雅变身3.2 超能力操作符盘点四、实战演练&#xff1a;构建天气查询…

【离线数仓项目】——任务调度与数据可视化实战

摘要 本文主要围绕离线数仓项目中的任务调度与数据可视化实战展开&#xff0c;介绍了业务流程虚拟节点、离线数仓任务调度、数据可视化等方面的内容&#xff0c;涉及DataWorks和QuickBI等工具的使用&#xff0c;并提供了相关的博文参考和项目实战域信息。 1. 任务调度管理实战…

【视频格式转换】.264格式转为mp4格式

背景 视频格式转换是多媒体处理中的常见需求&#xff0c;尤其在视频编辑、存储或跨平台播放时。H.264&#xff08;即AVC&#xff09;是一种广泛使用的视频编码标准&#xff0c;以其高压缩率和良好兼容性著称&#xff0c;但通常以容器格式&#xff08;如.264裸流文件&#xff0…

JAVA学习笔记 使用notepad++开发JAVA-003

目录 1 前言 2 部署notepad的java开发环境 2.1 下载并安装notepad 2.2 设置新建文件的语言 2.3 安装NppExec插件 2.4 编写JAVA脚本 2.5 设置脚本执行快捷键 2.6 效果测试 3 小结 1 前言 JAVA可以使用记事本来编写代码&#xff0c;但是这种方式效率十分低下。我们可以使…

Vue Router 完全指南:从入门到实战,高效管理前端路由

前言在现代化的前端开发中&#xff0c;路由管理是构建单页应用&#xff08;SPA&#xff09;的核心功能之一。Vue.js 作为主流的前端框架之一&#xff0c;提供了强大的官方路由库Vue Router&#xff0c;帮助开发者高效管理页面跳转、动态加载、权限控制等关键需求。无论是构建企…

Sentinel热点参数限流完整示例实现

Sentinel热点参数限流完整示例实现 1. 添加Maven依赖 (pom.xml) <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId><version>2.2.7.RELEASE</version> </depend…

正则表达式深度解析:从LeetCode 3136题说起

正则表达式深度解析&#xff1a;从LeetCode 3136题说起 引言 正则表达式&#xff08;Regular Expression&#xff0c;简称RegEx&#xff09;是一种强大的字符串匹配工具&#xff0c;在字符串处理、数据验证、文本搜索等场景中有着广泛的应用。本文将以LeetCode 3136题"有效…

映美打印机-URL页面打印

<?php /** 打印 - 映美云 https://open.jolimark.com/doc/ */ namespace Home\Controller; use Admin\Logic\OrderLogic;class PrintController extends BaseController {private $appid "";private $appkey "";//打印机编号private $deviceIds &qu…

机器学习算法 ——XGBoost 的介绍和使用

前言&#xff1a; 最近在工作中遇到一个结构化数据回归预测的问题&#xff0c;用到了很多回归算法&#xff08;如多元线性回归等&#xff09;都没有很好的效果&#xff0c;于是使用了XGBoost&#xff0c;自己也冲三个特征参数人为的增加来几个&#xff0c;训练出来的效果还是很…

Linux操作系统之信号:保存与处理信号

目录 前言&#xff1a; 前文回顾与补充&#xff1a; 信号的保存 PCB里的信号保存 sigset_t 信号集操作函数 信号的处理 信号捕捉的流程&#xff1a;​编辑 操作系统的运行原理 硬件中断 时钟中断 死循环 软中断 总结&#xff1a; 前言&#xff1a; 在上一篇文…

Spring Boot 设置滚动日志logback

Spring Boot 的 logback 框架 Spring Boot 默认内置了 Logback 作为日志实现框架&#xff0c;只需要在resources文件夹下添加一个logback-spring.xml&#xff0c;springboot会按照你的设置自动开启logback日志功能。 配置 logback-spring.xml 实现每天产生一个日志文件&#xf…

如何定义一个只能在堆上或栈上生成对象的类

在C中&#xff0c;可以通过特定的技术手段来控制对象只能在堆(heap)或栈(stack)上创建。只能在堆上创建对象的类要实现这一点&#xff0c;我们需要阻止用户直接实例化对象&#xff0c;而只能通过new操作符创建。class HeapOnly { public:static HeapOnly* create() {return new…

1.1 前端-vue3项目的创建

构建工具先搭好vue3框架 vue2的vue-cli脚手架基于webpack构建工具创建vue的框架. 而在vue3&#xff0c;可以通过vite构建工具创建vue3项目&#xff0c;性能更优。 两者创建方式的区别&#xff1a;cmd命令基于的构建工具vue2/vue3vue create 项目名称&#xff08;或 vue ui图形化…

PHP password_get_info() 函数

password_get_info() 函数用于返回指定散列&#xff08;hash&#xff09;的相关信息。 PHP 版本要求: PHP 5 > 5.5.0, PHP 7 语法 array password_get_info ( string $hash ) 参数说明&#xff1a; $hash: 一个由 password_hash() 创建的散列值。 返回值 返回三个元素…