【Element UI】解决el-tooltip组件在鼠标快速移动场景下出现的残影问题

在Element UI的el-tooltip组件中，当鼠标移动速度非常快时，可能会出现一些视觉上的残影问题。这通常是由于组件的渲染没有跟上鼠标移动的速度，导致当鼠标快速移出元素时， tooltip元素还没有完全消失。

为了解决这个问题，可以通过增加一些额外的逻辑来确保当鼠标移出元素后，tooltip能够及时地被关闭。

以下是一个简单的示例，展示了如何通过Vue的自定义指令来解决这个问题：

// 注册一个自定义指令
Vue.directive('tooltip-fix', {
  bind(el, binding) {
    const openTooltip = () => {
      const tooltip = el.querySelector('.el-tooltip__popper');
      if (tooltip) {
        tooltip.style.display = 'block';
      }
    };
 
    el.addEventListener('mouseenter', openTooltip);
    el.addEventListener('mouseleave', () => {
      setTimeout(() => {
        if (!el.contains(document.activeElement)) {
          const tooltip = el.querySelector('.el-tooltip__popper');
          if (tooltip) {
            tooltip.style.display = 'none';
          }
        }
      }, 100);
    });
  }
});

在你的组件中，使用这个自定义指令：

<el-tooltip
  content="这是一段内容"
  v-tooltip-fix
>
  <div>鼠标悬停这里</div>
</el-tooltip>

这段自定义指令的逻辑是：当鼠标移入元素时显示tooltip，当鼠标移出元素后，在100毫秒后再次检查鼠标是否仍然移出了元素，如果是，则隐藏tooltip。这样可以在大多数情况下避免 tooltip 的残影问题。