实现逻辑:通过文本的高度是否大于文本行数的高度(文中实例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;
},