Vue文本内容超出显示省略号，超出显示tooltip提示

项目中固定宽度的容器文本超出显示省略号，超出部分显示tooltip场景很常见，所以自己就着手写了一个过滤器用于判断文本是否超出。
代码中有用到Element-UI的组件，还有会提示在Table组件中和Tree组件中如何超出显示tooltip提示。
还有一种办法大家可以借鉴，个人觉得第二种会好一点Vue文本内容超出显示省略号，超出显示tooltip提示2.0

文本超出显示省略号

• 单行文本

.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>

欢迎大哥评论解决办法

Table组件中的使用

table组件其实有考虑这个问题 Table-column中存在属性 show-overflow-tooltip专门做这事。

Tree组件中的使用

Tree组件中使用其实有用到上面的方法。只是需要确定固定宽度。其实也不难，上代码大家都明白了。
这个tree的结构大致就是这样通过scoped slot自定义节点内容。内容里包括显示的文字以及tooltip
这里唯一需要确定的一点就是内容的宽度，也就是257 - node.level * 18。

257: el-tree确定的宽度(这个大概率是自己给的，注意左右padding)
node.level: 树的层级
18: 展开收起的三角所占区域(不是18就自己量一下，三角周围的margin也要算)
257 - node.level × 18: 总宽度 - 节点层级 × 小三角所占区域

<el-tree accordion :props="defaultsysstructure" ref="tree" :data="modelSList" 
@node-click="handleNode" :expand-on-click-node="false">
      <div class="custom-tree-node t-ellipsis" :style="`width: ${257 - node.level * 18}px`"
       slot-scope="{ data, node }">
           <el-tooltip popper-class="atooltip" effect="dark" :content="data.Name" 
           :disabled="data.Name | showTooltip(257 - node.level * 18)" placement="top">
                <span>{{ data.Name }}</span>
           </el-tooltip>
      </div>
</el-tree>