element-ui —— el-tooltip 超出部分显示省略号 鼠标悬浮显示详情

前言：el-tooltip组件本身就是悬浮提示功能，在对它进行二次封装时，要对它进行优化，实现超出的文本加提示，没超出的不给予提示。

思路：加一个中间层，子集为数据全量，控制中间层的样式，并设置宽度，通过 ref 进行宽度对比，若子集比中间层更宽，既说明显示了...样式

<template><div class="text-tooltip"><el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top"><p class="over-flow" :class="className" @mouseover="onMouseOver(refName)"><span :ref="refName">{{content||'-'}}</span></p></el-tooltip></div></template><script>export default {name: 'textTooltip',props: {// 显示的文字内容content: {type: String,default: () => {return ''}},// 外层框的样式，在传入的这个类名中设置文字显示的宽度className: {type: String,default: () => {return ''}},// 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）refName: {type: String,default: () => {return ''}}},data() {return {isShowTooltip: true}},methods: {onMouseOver(str) {let parentWidth = this.$refs[str].parentNode.offsetWidth;let contentWidth = this.$refs[str].offsetWidth;// 判断是否开启tooltip功能if (contentWidth>parentWidth) {this.isShowTooltip = false;} else {this.isShowTooltip = true;}}}}</script><style lang="scss" scoped>.over-flow {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.wid190 {width: 100%;}p{margin: 0;}</style>

在需要用到组件的页面中引入

import tooltipOver from './components/tooltipOver'

使用组件

<tooltip-over:content="tipText"class="wid190"refName="tooltipOver"></tooltip-over>

tip：当同一页面使用多次组件时，需要定义不同的refName属性