一、需求:如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。效果图如下:
二、实现:
1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容;
<!-- 表格字段:引用主题 -->
<el-table-columnalign="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-popoverv-elseplacement="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-tooltipclass="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><spanstyle="color: #1989fe; cursor: pointer"slot="reference">{{ scope.row.refCnt }}</span></el-popover></template>
</el-table-column>
2、定义isShowTooltip控制是否展示提示文字tooltip;
data() {return {isShowTooltip: false, // 是否显示提示文字}
}
3、对应的鼠标放置触发的方法实现;
// 是否提示toolTipvisibilityChange(event) {const ev = event.targetconst 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}},