[JavaScript知识库]Vue文本内容超出显示省略号，超出显示tooltip提示

项目中固定宽度的容器文本超出显示省略号，超出部分显示tooltip场景很常见，所以自己就着手写了一个过滤器用于判断文本是否超出。

文本超出显示省略号

• 单行文本

.t-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

• 多行文本

.t-column-ellipsis {
	display: -webkit-box;    
	-webkit-box-orient: vertical;    
	-webkit-line-clamp: 3;    
	overflow: hidden;
}

超出显示tooltip提示

思路

确定一个固定宽度的盒子比较我输入文本的宽度是否大于固定盒子宽度。

注册全局过滤器

msg: 文字信息
width： 父盒子固定宽度

Vue.filter('showTooltip', (msg, width) => {
  let app = document.querySelector('#app')
  // 这里需要用span，div默认是父盒子的宽度
  let span = document.createElement('span')
  span.innerHTML = msg
  // 必须要添加到DOM树里面才有宽度，太狗了。所以对性能应该是有所影响的
  // 如果要优化肯定就在这里优化了，目前我还没有想到解决办法
  // 小弟愚钝，不知有没有大哥评论里面给个解决办法
  // 或者给一个全新的办法解决
  app.appendChild(span)
  let isShow = span.offsetWidth > width
  // 新增了当然要把他咔嚓掉嘛
  app.removeChild(span)
  return !isShow
})

显示

<el-tooltip popper-class="atooltip" 
	effect="dark" 
	:content="msg" 
	:disabled="msg | showTooltip(300)" 
	placement="top">
		<div class="t-ellipsis">
	 		{{msg}}
		</div>
</el-tooltip>

欢迎大哥评论解决办法