vue 文本超出宽度超出部分隐藏，鼠标移入展示全部组件封装

灰太狼 2022-09-06 12:29 405阅读 0赞

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

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

子组件：

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

**注意：**

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