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;
    },
相关推荐
咖啡の猫6 分钟前
Python集合生成式
前端·javascript·python
dazzle8 分钟前
计算机视觉处理(OpenCV基础教学(六):基于HSV颜色空间的目标颜色识别)
javascript·opencv·计算机视觉
2501_9462338911 分钟前
Flutter与OpenHarmony我的作品页面实现
android·javascript·flutter
QT 小鲜肉16 分钟前
【Linux命令大全】001.文件管理之mtoolstest命令(实操篇)
linux·运维·前端·笔记·microsoft
holeer19 分钟前
React UI组件封装实战——以经典项目「个人博客」与「仿手机QQ」为例
前端·javascript·react.js·ui·前端框架·软件工程
chilavert31826 分钟前
技术演进中的开发沉思-277 AJax :Calendar
前端·javascript·microsoft·ajax
chilavert31827 分钟前
技术演进中的开发沉思-276 AJax : Menu
javascript·ajax·交互
debug 小菜鸟27 分钟前
搭建web 环境的那些事
前端
鹏多多28 分钟前
Flutter下拉刷新上拉加载侧拉刷新插件:easy_refresh全面使用指南
android·前端·ios
幽络源小助理36 分钟前
SpringBoot+Vue数字科技风险报告管理系统源码 | Java项目免费下载 – 幽络源
java·vue.js·spring boot