vue+elementui 实现文本超出长度显示省略号，鼠标移上悬浮展示全部内容

在Vue中结合Element UI实现文本超出长度显示省略号，鼠标悬浮时展示全部内容，可以通过自定义指令来实现。

首先，创建一个自定义指令v-ellipsis：

// 自定义指令 v-ellipsis
Vue.directive('ellipsis', {
  bind(el, binding) {
    const MOUSE_ENTER_CLASS = 'ellipsis-mouse-enter';
    const MOUSE_LEAVE_CLASS = 'ellipsis-mouse-leave';
 
    // 创建一个div用于计算文本宽度
    const tooltipDiv = document.createElement('div');
    tooltipDiv.style.position = 'absolute';
    tooltipDiv.style.visibility = 'hidden';
    tooltipDiv.style.whiteSpace = 'nowrap';
    tooltipDiv.style.fontSize = getComputedStyle(el).fontSize;
    tooltipDiv.style.fontFamily = getComputedStyle(el).fontFamily;
    tooltipDiv.style.padding = getComputedStyle(el).padding;
    tooltipDiv.style.width = 'auto';
    tooltipDiv.style.maxWidth = '100%';
    tooltipDiv.style.overflow = 'hidden';
    tooltipDiv.style.textOverflow = 'ellipsis';
 
    el.appendChild(tooltipDiv);
 
    const updateTooltip = () => {
      const text = el.textContent.trim();
      tooltipDiv.textContent = text;
      const tooltipWidth = tooltipDiv.offsetWidth;
      const elementWidth = el.offsetWidth;
 
      if (tooltipWidth > elementWidth) {
        el.title = text;
        el.classList.add(MOUSE_ENTER_CLASS);
        el.classList.add('ellipsis');
      } else {
        el.removeAttribute('title');
        el.classList.remove(MOUSE_ENTER_CLASS);
        el.classList.remove('ellipsis');
      }
    };
 
    updateTooltip();
 
    el.addEventListener('mouseenter', () => {
      el.classList.add(MOUSE_ENTER_CLASS);
    });
 
    el.addEventListener('mouseleave', () => {
      el.classList.remove(MOUSE_ENTER_CLASS);
    });
 
    window.addEventListener('resize', updateTooltip);
  },
  unbind(el) {
    el.removeEventListener('resize', () => {});
  }
});

然后，在Vue组件中使用这个自定义指令：

<template>
  <div>
    <el-tooltip
      class="item"
      effect="dark"
      placement="top"
      :content="tooltipContent"
      :disabled="!isEllipsis"
    >
      <div v-ellipsis>这是一段需要显示省略号的非常非常长的文本内容</div>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  da