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;
    },
相关推荐
蜡台4 分钟前
vue.config.js 配置
前端·javascript·vue.js·webpack
qq_381338507 分钟前
微前端架构下的状态管理与通信机制深度解析:从 qiankun 源码到性能优化实战
前端·状态模式
吴声子夜歌10 分钟前
TypeScript——webpack
javascript·webpack·typescript
han_15 分钟前
JavaScript设计模式(六):职责链模式实现与应用
前端·javascript·设计模式
网易云音乐技术团队16 分钟前
音乐应该“更好找”:我们为什么在 Agent 时代做了一个音乐 CLI
前端·人工智能
攀登的牵牛花19 分钟前
2.1w Star 的 pretext 火在哪?
前端·github
进击的尘埃25 分钟前
Navigation API 如何重塑前端路由
javascript
散步去海边27 分钟前
Pretext 初识——零 DOM 测量的文本布局引擎
前端
早點睡39029 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-orientation-locker
javascript·react native·react.js
xw-busy-code30 分钟前
npm 包管理笔记整理
前端·笔记·npm