【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips

在Vue中，你可以通过自定义指令来实现这个功能。以下是一个简单的示例，演示如何创建一个自定义指令来判断文本是否溢出，并根据判断结果显示或隐藏el-tooltip。

// 在你的 Vue 组件中添加如下代码
directives: {
  'el-tooltip': {
    bind(el, binding) {
      const tooltip = el.__tooltip__;
 
      if (!tooltip) {
        // 创建 tooltip 实例
        const popper = el.querySelector('.el-tooltip__popper');
        tooltip = el.__tooltip__ = new ElTooltip(ElTooltip, {
          placement: binding.value.placement || 'top',
          content: binding.value.content,
          popperOptions: binding.value.popperOptions || {}
        });
        tooltip.$slots.default = [popper];
        tooltip.$mount();
        document.body.appendChild(tooltip.$el);
      }
 
      const checkOverflow = () => {
        const isOverflow = el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight;
        if (isOverflow) {
          tooltip.visible = true;
        } else {
          tooltip.visible = false;
        }
      };
 
      el.addEventListener('mouseenter', checkOverflow);
      el.__checkOverflow = checkOverflow;
    },
    unbind(el) {
      if (el.__tooltip__) {
        el.__tooltip__.visible = false;
        el.__checkOverflow && el.removeEventListener('mouseenter', el.__checkOverflow);
      }
    }
  }
}

然后你可以在模板中这样使用它：

<div v-el-tooltip="{ content: '这是提示文本', popperOptions: { boundariesElement: 'body' } }">
  文本内容
</div>

这个自定义指令v-el-tooltip允许你传递content和popperOptions等属性，这些属性会被用来初始化el-tooltip组件。当元素的大小限制导致内容溢出时，el-tooltip会显示，否则不会显示。