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;
    },
相关推荐
gnip12 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart12 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.12 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu12 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss12 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师12 小时前
React面试题
前端·javascript·react.js
木兮xg12 小时前
react基础篇
前端·react.js·前端框架
ssshooter13 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘14 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai14 小时前
HTML HTML基础(4)
前端·html