vue Element UI扩展内容过长使用tooltip显示

import Vue from 'vue';
import { on, off, getStyle } from 'element-ui/src/utils/dom';
/**
 * ak-tooltip-auto-show
 * 当text没有被折叠时，不显示tooltip
 */
Vue.directive('ak-tooltip-auto-show', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseenter', function (e) {
      let defalutSilent = !!Vue.config.silent;
      Vue.config.silent = true;
      vnode.componentInstance.disabled = true;
      const range = document.createRange();
      range.setStart(el, 0);
      range.setEnd(el, el.childNodes.length);
      const rangeWidth = Math.round(range.getBoundingClientRect().width);
      const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
      if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
        vnode.componentInstance.disabled = false;
      }
      Vue.config.silent = defalutSilent;
    });
  }
});

　　<div class="details-inner__row">
    <span class="details-inner__row-name">姓名:</span>
    <el-tooltip placement="top" effect="dark" :content="item.name" v-ak-tooltip-auto-show>
        <span class="details-inner__row-value">{{item.name}}</span>
    </el-tooltip>
</div>
// css
.details-inner__row-value {
　　width: 80%;
　　display: inline-block;
　　white-space: nowrap;
　　text-overflow: ellipsis;
　　overflow: hidden;
}

import { getStyle } from 'element-plus/lib/utils/dom/index';
/**
 * show-overflow-tooltip for text
 * 当text没有被折叠时，不显示tooltip
 */
const akTooltipAutoShow = {
  created(el, binding, vnode) {
    let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');
    if (tooltipNode) {
      let { content } = tooltipNode.props;
      if (content && ['添加', '编辑', '删除','查看'].includes(content)) {
        el.addEventListener('click', function (e) {
          let defalutDisabled = tooltipNode.component.props.disabled;
          if (!defalutDisabled) {
            tooltipNode.component.props.disabled = true;
            setTimeout(() => {
              tooltipNode.component.props.disabled = defalutDisabled;
            }, 200);
          }
        });
      } else {
        el.addEventListener('mouseenter', (e) => {
          tooltipNode.component.props.disabled = true;
          const range = document.createRange();
          range.setStart(el, 0);
          range.setEnd(el, el.childNodes.length);
          const rangeWidth = Math.round(range.getBoundingClientRect().width);
          const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
          if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
            tooltipNode.component.props.disabled = false;
          }
        });
      }
    }
  }
};
export default akTooltipAutoShow;

// main.js
const app = createApp(App);
import akTooltipAutoShow from './akTooltipAutoShow.js';
app.directive('ak-tooltip-auto-show', akTooltipAutoShow);

<div class="details-inner__row">
　　<span class="details-inner__row-name">姓名:</span>
　　<span class="details-inner__row-value" v-ak-tooltip-auto-show>
　　　　<el-tooltip placement="top-end" :content="item.name">{{item.name}}</el-tooltip>
　　</span>
</div>

.details-inner__row-value {
　　width: 80%;
　　display: inline-block;
　　white-space: nowrap;
　　text-overflow: ellipsis;
　　overflow: hidden;
}