el-tooltip根据文本行数控制是否展示

实现逻辑:通过文本的高度是否大于文本行数的高度(文中实例2行)来修改el-tooltip的disabled属性

html 复制代码
 <div class="item-form" v-for="item in extInfo">
    <div class="item-form_label">
        span>{{ item.label }}:</span>
    </div>
    <el-tooltip 
        popper-class="orderDetailToolTip" 
        :disabled="item.showTip" 
        effect="dark" 
        :content="item.value" 
        placement="top"
    >
        <div 
            class="item-form_value maxWidth textHidden"                     
            @mouseenter="showTips($event,item)"
            @mouseleave="hiddenShowTips($event,item)" 
        >
           <span>{{ item.value }}</span>
       </div>
   </el-tooltip>
</div>
javascript 复制代码
   showTips(el, item) {
      if (el.target.scrollHeight > 46) {  //这里我的两行高度为46,可以根据自身需求进行更改
          item.showTip = false;
      } else {
          item.showTip = true;
      }
    },
    hiddenShowTips(el, item) {
      item.showTip = true;
    },
相关推荐
吃素的老虎11 小时前
从零构建 AI 网关(一):WebSocket 服务器实战
前端
酉鬼女又兒11 小时前
HTML基础实例样式详解零基础快速入门Web开发(可备赛蓝桥杯Web应用开发赛道) 助力快速拿奖
前端·javascript·职场和发展·蓝桥杯·html·html5·web
Watermelo61711 小时前
【前端实战】构建 Vue 全局错误处理体系,实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
A923A11 小时前
【Vue3大事件 | 项目笔记】第二天
前端·vue.js·笔记·前端框架·前端项目
万码社12 小时前
小程序开发实战:我手写日历组件踩过的那些坑
前端
工藤新一¹12 小时前
《操作系统》第一章(1)
java·服务器·前端
进击的尘埃12 小时前
Vue 3 编译器宏的编译时魔法:defineModel、defineSlots 与 AST 转换的真相
javascript
用户97141718142712 小时前
Flex 和 Grid 详细使用指南:从入门到实战避坑
前端·css
不会敲代码112 小时前
使用 Mock.js 模拟 API 数据,实现前后端并行开发
前端·javascript
琛説12 小时前
Web-Rooter:一种 IR + Lint 模式的 AI Agent 创新尝试【或许是下一个 AI 爆火方向】
前端·人工智能