el-tooltip-文字溢出展示，文字不溢出不展示的功能实现

1.  页面展示效果如图所示

2. 项目需求：文字出现截断鼠标悬浮则出现提示框，不出现截断则不出现。

3. 方案：

        （1）开始想到的是取内容的length进行判断，后面发现文字有标点符号，用length判断不准确；

        （2）后面使用鼠标移入事件【@mouseover】实现此功能，代码如下 

<div class="list-item-b">
	<p class="industry" ref="industryContainer">
		<span style="text-wrap: nowrap">所属行业：</span>
			<el-tooltip placement="top" effect="light" :disabled="!isDisabledTooltip" :open-delay="200" popper-class="supplier-info-popper">
				<div slot="content" style="max-width: 1200px; line-height: 20px" class="font-14 tooltip" v-html="item.industryTypeName" />
				<p>
					<span :class="['text-color', `inName${i}`]" @mouseover="isShowTootip(`.inName${i}`, 'offsetWidth')">{{ item.industryTypeName }}</span>
				</p>
			</el-tooltip>
	</p>
	<p class="flex business">
		<el-tooltip placement="top" effect="light" :disabled="!isDisabledTooltip" :open-delay="200" popper-class="supplier-info-popper">
			<div slot="content" style="max-width: 1200px; line-height: 20px" class="font-14 tooltip" v-html="item.businessScope" />
				<p>
					经营范围：
					<span ref="spanRef" :class="['text-color', `clName${i}`]" @mouseover="isShowTootip(`.clName${i}`, 'offsetHeight')">{{ item.businessScope }}</span>
				</p>
		</el-tooltip>
	</p>
</div>

isShowTootip(className, offset) {
	const dom = document.querySelector(className)
	this.isDisabledTooltip = dom[offset] > dom.parentNode[offset]
}

因为行业是一行超出就出现截断，所以这里获取的是宽【offsetWidth】；

经营范围是两行出现截断，获取的是高【offsetHeight】。

（3）做的过程中出现的问题：

最开始没有加:open-delay="200"，出现的情况是鼠标第一次移入时该展示提示框并没有展示，而是第二次移入才展示，应该是展示框已经加载完成，isDisabledTooltip的值还没有赋值成功，执行顺序的问题，加上组件的延迟出现的属性:open-delay="200"后解决了这一问题 ；

根据ui要求修改提示框边框线，使用popper-class绑定类名，一直不生效，使用v-deep也是不生效的，打开f12选择一下提示框的元素会发现并没有在这个这个页面组件的布局之内，穿透是不起作用的，需要去掉scoped，所以一定要起一个特殊的类名，避免出现重复。

以上是实现这一功能的全部过程，如有问题欢迎留言，感谢！！！