当我们把el-tooltip组件直接拿来和el-table组件使用的时候,鼠标上下快速移动会出现如图残影和渐变消失的问题
如下图:
所以我们去看一下官网
我们这时候试一试将 transition 属性设置为空
代码如下:
<el-tooltip
content="执行成功"
transition=""
placement="bottom-start">
<i class="el-icon-success" style="color: #77c807" />
</el-tooltip>
发现渐变消失是解决了但是并没有解决鼠标快速移动产生残影的问题
最终代码如下:
<el-tooltip
content="执行成功"
transition=""
:open-delay="450"
placement="bottom-start">
<i class="el-icon-success" style="color: #77c807" />
</el-tooltip>
解释:
open-delay 这个属性官网中默认值为 0
说明是只要鼠标滑到该区域就会立马出现,所以我们这里延迟一下el-tooltip组件出现时间即可文章来源:https://www.toymoban.com/news/detail-826250.html
经测试大约大于 450 毫秒是不出现残影的最快时间文章来源地址https://www.toymoban.com/news/detail-826250.html
到了这里,关于【Element UI】解决el-tooltip组件在鼠标快速移动场景下出现的残影问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!