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;
    },
相关推荐
沛沛老爹23 分钟前
从Web到AI:行业专属Agent Skills生态系统技术演进实战
java·开发语言·前端·vue.js·人工智能·rag·企业转型
GGGG寄了1 小时前
HTML——列表标签
前端·html5
HWL56791 小时前
显示器缩放和更改分辨率的区别
前端·css·vue.js·计算机外设·html5
jzshmyt1 小时前
曼德勃罗集web可视化应用
前端
GGGG寄了1 小时前
HTML——表格的基本用法
前端·html
yanyu-yaya2 小时前
速学兼复习之vue3章节3
前端·javascript·vue.js·学习·前端框架
web小白成长日记2 小时前
前端向架构突围系列模块化 [4 - 1]:思想-超越文件拆分的边界思维
前端·架构
tkevinjd2 小时前
3-Vue&Ajax
前端·vue.js·ajax
林恒smileZAZ2 小时前
前端拖拽,看似简单,其实处处是坑
前端·javascript·vue.js
多仔ヾ2 小时前
Vue.js 前端开发实战之 03-Vue 开发基础(2)
vue.js