vue 文本超出宽度超出部分隐藏，鼠标移入展示全部组件封装_vue el-collapse-item 字段过长隐藏

在 VUE + ElementUI 的项目里面，标题内容超出固定宽度超出部分隐藏，鼠标移入显示全部内容。由于项目里面这一类的需求比较多，这里我考虑封装一下，方便使用。

组件封装的思路是借助 ElementUI 里面的 tooltip 组件来实现鼠标移入展示全部的效果，然后根据标题的长度来控制 tooltip 组件的显示隐藏。具体实现代码如下：
父组件：

<textOverflow maxWidth="400px" :content='item.subjectName'></textOverflow>
1

子组件：

<template>
	<div :style="{maxWidth:maxWidth}" class="text">
		<span v-if="!isOver" class="spanItem">{{content}}</span>
		<el-tooltip v-else class="item" effect="dark" :content="content" :placement="placement">
	      <span class="spanItem">{{content}}</span>
	    </el-tooltip>
	</div>
</template>
<script>
	export default {
		props:{
			content:{ //标题内容
				type:String,
				default:''
			},
			maxWidth:{//最大显示宽度
				type:String,
				default:'100px'
			},
			placement:{//提示位置
				type:String,
				default:'top-start'
			}
		},
		data(){
			return {
				isOver:false //是不是超出指定宽度
			}
		},
		mounted(){
			this.init();
		},
		methods:{
			init(){
				let dom = this.$refs.spanItem;
				if(dom.offsetWidth >= parseInt(this.maxWidth)){
					this.isOver = true;
				}else{
					this.isOver = false;
				}
			}
		}
	}
</script>
<style scoped="scoped">
	.text{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

注意：

可以循环使用也可以单独使用，在子组件获取节点的时候使用 ref 和 refs 来注册和获取子元素，针对每一个节点判断内容是否超出指定宽度。
超出隐藏的效果添加到最外层 div 上，这样才能获取 span 真实文本的宽度。