1.给span设置样式(设置宽度和溢出显示省略号)
<span class="data">{{name}}</span>
// 文本超出长度,显示省略号
.overflow-hidden{
width: 120px;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
此处widt为你要限制的宽度。
2.绑定mouseenter
<span class="data" @mouseenter="mouseEnter">{{name}}</span>
data(){
return{
//是否显示tooltip
nameShow:true
// 展示的名称
name:''
}
}
mouseEnter(event) {
let element = event.currentTarget;
if (element.scrollWidth > element.clientWidth) {
this.nameShow= false;
} else {
this.nameShow= true;
}
},