自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用

在Vue中，可以通过自定义指令来实现这个功能。以下是一个自定义指令的示例，它会检查元素内的文本是否超出了元素的宽度，如果超出，则使用el-tooltip显示工具提示。

首先，定义指令：

// 导入Element UI的Tooltip组件
import { Tooltip } from 'element-ui';
 
export default {
  bind(el, binding, vnode) {
    const tooltip = {
      content: el.innerText,
      placement: 'top',
      ...(binding.value || {})
    };
 
    const observer = new ResizeObserver(entries => {
      const isOverflown = entries[0].contentRect.width < el.scrollWidth;
 
      if (isOverflown) {
        // 如果文本溢出，则添加Tooltip
        Tooltip(el, tooltip);
      } else {
        // 如果文本未溢出，则移除Tooltip
        const openTooltips = document.querySelectorAll('.el-tooltip');
        openTooltips.forEach(tooltip => {
          if (tooltip.$parent === el) {
            tooltip.visible = false;
          }
        });
      }
    });
 
    observer.observe(el);
 
    vnode.elm['__observer'] = observer;
  },
  unbind(el, binding, vnode) {
    if (el['__observer']) {
      el['__observer'].disconnect();
    }
  }
};

然后，在Vue中注册这个指令：

import Vue from 'vue';
import Directives from './path/to/directives'; // 指令文件路径
 
Vue.use(Directives);

最后，在模板中使用这个指令：

<template>
  <div v-overflow-tooltip>这是一段可能会超出容器宽度的文本</div>
</template>

确保您已经安装了Element UI，并且在您的项目中正确引入了el-tooltip组件。这个自定义指令会在文本超出元素宽度时添加el-tooltip，并在文本不超出时移除它。