动态判断文字是否溢出，并是否触发tooltip

一只大杯子呀

于 2025-03-03 15:20:32 发布

阅读量76

点赞数 2

文章标签：前端 vue css

本文链接：https://blog.youkuaiyun.com/QQTSS/article/details/145989921

版权

代码，解决方法

    <el-tooltip
      :content="childItem.iconPageName"
       placement="bottom"
       effect="light"
       :disabled="!isShowTooltip"
     >
       <p class="text-hidden" @mouseenter="visibilityChange($event)">
         {{ childItem.iconPageName }}
       </p>
     </el-tooltip>
        
// 文本溢出隐藏
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度
      const content_weight = ev.clientWidth; // 文本的可视宽度
      if (ev_weight > content_weight) {
        // 实际宽度 > 可视宽度  文字溢出
        this.isShowTooltip = true;
      } else {
        // 否则为不溢出
        this.isShowTooltip = false;
      }
    }