js 检测文本是否溢出

自定义指令的方式

手写实现

/**
 * 检测文本是否溢出
 * 参考 https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#L241
 * @param {*} e
 * @returns
 */
function isEllipsis(e) {
  return new Promise(resolve => {
    const el = window.event || e; // 浏览器兼容，最好写一下
    const eles = el.target;
    const elComputed = document.defaultView.getComputedStyle(eles, '');
    const padding =
      parseInt(elComputed.paddingLeft.replace('px', '')) + parseInt(elComputed.paddingRight.replace('px', ''));

    const range = document.createRange();
    range.setStart(eles, 0);
    range.setEnd(eles, eles.childNodes.length);
    const rangeWidth = range.getBoundingClientRect().width;
    if (rangeWidth + padding > eles.offsetWidth || eles.scrollWidth > eles.offsetWidth) {
      resolve(true);
      console.log('溢出了');
    } else {
      resolve(false);
      console.log('没有溢出了');
    }
  });
}

tip:这个方法可以直接使用在elementplus的表头超出配置里面，具体的方法请参考ElementPlus 全局配置