vue.js el-tooltip根据文字长度控制是否提示toolTip问题
作者：Lemon今天学习了吗
这篇文章主要介绍了vue.js el-tooltip根据文字长度控制是否提示toolTip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、需求
如何判断当前文本文字是否超出文本长度，是否需要出现提示toolTip。
效果图如下：
二、实现
1.表格字段鼠标放置el-popover出现 “引用主题”
的具体内容；
<!-- 表格字段：引用主题 -->
<el-table-column
align="center"
header-align="center"
width="100"
label="引用主题"
sortable="custom"
prop="refCnt"
show-overflow-tooltip
>
<template slot-scope="scope">
<span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span>
<el-popover
v-else
placement="bottom"
width="150"
trigger="hover"
>
<ul :data="scope.row?.themeVos" class="ul-popover">
<li v-for="(item, index) in scope.row?.themeVos" :key="index">
<el-tooltip
class="item"
effect="light"
:content="item?.themeName"
placement="top-start"
:disabled="!isShowTooltip"
>
<!-- visibilityChange：鼠标放置后是否展示省略部分；-->
<!-- class="overflow"：是否超出隐藏出现省略号； -->
<div @mouseenter="visibilityChange($event)" class="overflow">
{{ item?.themeName }}
</div>
</el-tooltip>
</li>
</ul>
<span
style="color: #1989fe; cursor: pointer"
slot="reference"
>
{{ scope.row.refCnt }}
</span>
</el-popover>
</template>
</el-table-column>2.定义isShowTooltip控制是否展示提示文字tooltip
data() {
return {
isShowTooltip: false, // 是否显示提示文字
}
}3.对应的鼠标放置触发的方法实现
// 是否提示toolTip
visibilityChange(event) {
const ev = event.target
const ev_weight = ev.scrollWidth // 文本的实际宽度 scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
const content_weight = ev.clientWidth // 文本的可视宽度 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
// const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
if (ev_weight > content_weight) {
// 实际宽度 > 可视宽度 文字溢出
this.isShowTooltip =true
} else {
// 否则为不溢出
this.isShowTooltip = false
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。