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;
    },
相关推荐
LYFlied4 分钟前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞9 分钟前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
小徐_233324 分钟前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
C_心欲无痕27 分钟前
vue3 - 类与样式的绑定
javascript·vue.js·vue3
GIS之路1 小时前
GIS 数据转换:使用 GDAL 将 Shp 转换为 GeoJSON 数据
前端
JIngJaneIL1 小时前
基于springboot + vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
天天扭码1 小时前
以浏览器多进程的角度解构页面渲染的整个流程
前端·面试·浏览器
你们瞎搞2 小时前
Cesium加载20GB航测影像.tif
前端·cesium·gdal·地图切片
南山安2 小时前
Tailwind CSS:顺风CSS
javascript·css·react.js
milanleon2 小时前
使用Spring Security进行登录认证
java·前端·spring