el-tooltip 快速滚动的时候出现残影如何解决 vue3

 

<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 禁用自动位置适应
   • 关闭内置滚动监听避免冲突