<el-tooltip :content="data.name" placement="top" :disabled="!isShowTooltip">
<span class="name group-name" @mouseenter="visibilityChange($event)"> {
{ data.name }} </span>
</el-tooltip>
export default{
data(){
return{
isShowTooltip:false,
}
},
methods: {
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;
}
},
}
}
.group-name {
flex: 1;
display: block;
overflow: hidden;
max-width: 60%;
text-overflow:ellipsis;
white-space: nowrap;
}