基于elementui二次封装tooltip组件(完善,多行高度的情况)_

 当有需求是:使用自定义样式,在有省略号的情况下显示tooltip但是无省略号时没有提示,则有了下面的组件封装

<template>
  <div :style="{'--lineNum':lineNum}" class="text-tooltip">
    <el-tooltip :content="content" :disabled="isShowTooltip" class="item" effect="dark" placement="bottom">
      <div class="tooltip_over">
        <slot class="label" name="label"></slot>
        <div :class="className" :style="{color:normal?'#666':'','font-weight':normal?'normal':''}" class="over-flow"
             @mouseover="onMouseOver(refName)">
          <span :ref="refName">{{ content }}</span>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  name: 'textTooltip',
  props: {
    //默认字体高度
    lineHeight:{
      type:Number,
      default:14*1.5
    },
    //默认显示的行数
    lineNum: {
      type: Number,
      default: 1
    },
    //文字样式是否使用默认
    normal: {
      type: Boolean,
      default: true
    },
    // 显示的文字内容
    content: {
      type: String,
      default: ""
    },
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: ""
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    // 当同一页面使用多次组件时，需要定义不同的refName属性
    refName: {
      type: String,
      default: ""
    },
    //若出现外层框数值不确定的情况,可使用传参的方式定义父级的宽度
    parentWidth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    onMouseOver(str) {
      let contentWidth = this.$refs[str].offsetWidth;
      let height = this.$refs[str].offsetHeight;
      if (this.parentWidth != 0) {
        if (this.parentWidth < contentWidth + 20) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      } else {
        // 判断是否开启tooltip功能 this.$refs[str].parentNode.offsetWidth
        // console.log(contentWidth,height,this.$refs[str].offsetHeight);
        // 20为特殊字符的误差
        if (height>this.lineHeight*this.lineNum) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
$lineNum: var(--lineNum);
.tooltip_over {
  display: flex;
  line-height: 1.5;
 
  .label {
    width: 70px;
  }
 
  .over-flow {
    flex: 1;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: $lineNum;
    -webkit-box-orient: vertical;
  }
}
</style>

使用:

             <div class="courseName">
                    <Tooltip
                        :content="mainData.courseContent || '暂无'"
                        refName="tooltipOverCourseContent"
                        :normal=false
                        :lineNum=1
                    >
                      <div slot="label">课程简介：</div>
                    </Tooltip>
                  </div>

.courseName {
          display: inline-flex !important;
          max-width: 400px;
          span {
            flex: 1;
          }
        }