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;
    },
相关推荐
葡萄城技术团队10 分钟前
智慧表格(SpreadJS + AI):拥抱 Web 端对话式办公新时代
前端·人工智能
OpenTiny社区40 分钟前
电商系统集成GenUI SDK实操指南
前端·开源·ai编程
A_nanda41 分钟前
vue实现后端传输逐帧图像数据
前端·javascript·vue.js
YGY顾n凡43 分钟前
我开源了一个项目:一句话创造一个AI世界!
前端·后端·aigc
qq_12084093711 小时前
Three.js 工程向:动画循环与时间步进稳定性实践
前端·javascript
旷世奇才李先生1 小时前
React18\+TypeScript实战: Hooks封装与企业级组件开发
前端·javascript·typescript
午安~婉1 小时前
Electron(续4)利用AI辅助完成配置功能
前端·javascript·electron·应用打包与发布
tERS ERTS1 小时前
头歌答案--爬虫实战
java·前端·爬虫
当时只道寻常1 小时前
Vue3 集成 NProgress 进度条:从入门到精通
前端·vue.js