【vue+elementUI】文本超出一定长度，展示tooltip文字提示。不超不展示。

最新推荐文章于 2024-06-07 15:39:16 发布

宋糍－

最新推荐文章于 2024-06-07 15:39:16 发布

阅读量1k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_44804622/article/details/134121397

版权

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;
      }
    },