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;
    },
相关推荐
天渺工作室14 分钟前
别再写改名脚本了,一个 Vite 插件搞定压缩、校验、自动哈希命名vite-plugin-pack-orchestrator
前端·vite
薯老板22 分钟前
事件循环(Event Loop)
javascript
大龄程序员狗哥23 分钟前
第30篇:使用Flask部署你的第一个AI模型——打造简易Web API(项目实战)
前端·人工智能·flask
AI砖家1 小时前
解剖 Claude Code:如何搭建一个企业级的私有化 AI 编程助手
前端·人工智能·ai编程
用户5757303346241 小时前
拒绝“首屏爆炸”:用 React 哨兵模式与懒加载打造丝滑列表
前端
大腕先生2 小时前
通用分页超详细介绍(附带源代码解析&页面展示效果)
xml·java·linux·服务器·开发语言·前端·idea
睿智的海鸥2 小时前
Markdown 语法大全详解
开发语言·前端·javascript·css·html
Highcharts.js2 小时前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts
HookJames2 小时前
设计Section 09 · Cost & Lead Time Factors 的完整 Block Editor 操作步骤
前端
玖玖passion3 小时前
React 常用 Hooks 函数及使用方法完全指南(useState / useEffect / useRef / useContext / useCallback / useMemo / useReducer)
前端·javascript