二次开发element el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容

二次开发element组件 el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容

EllipsisTooltip.vue（我是放置在了src/components）

<template>
  <!-- :disabled="disabledTip" -->
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
  >
    <span :class="className" @mouseenter="visibilityChange($event)">{{ text }}</span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'EllipsisTooltip',
  props: {
    text: { type: String, default: '' }, // 字符内容
    placement: { type: String, default: 'top-start' },
    className: { type: String, default: 'text' } // class
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    }
  },
  methods: {
    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target
      const ev_height = ev.offsetHeight // 文本的实际高度
      const content_height = this.$refs.tlp.$el.parentNode.clientHeight // 文本容器高度
      if (content_height < ev_height) {
        // 实际内容高度 > 文本高度 =》内容溢出
        this.tooltipFlag = true // NameIsIncludeWord ? true : !!false
      } else {
        // 否则为不溢出
        this.tooltipFlag = false
      }
    }
  }
}
</script>

css

//el-tooltip二次封装
.tooltip-wrap {
    height: 16px; // 必须要有高度设置，因为tooltip的显示条件是通过高度来判断的
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 1; // 因为通过高度所以只显示一行，溢出显示省略号
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;//英文数字折行
    span{
        line-height: 1.3;//这个行高看自定义样式文本高度
    }
 }

页面调用

<template>
	<div class="tooltip-wrap">
	    <ellipsis-tooltip
	        text="产品94958438产品94958438产品94958438产品94958438"
	    ></ellipsis-tooltip>
	</div>
</template>
<script>
	import EllipsisTooltip from '@/components/EllipsisTooltip.vue'//根据路径导入组件
	export default {
	    name:'singeProductView',
	    data () {},
    	components:{//在页面引用组件
	        EllipsisTooltip
	    }
    }
</script>