基于elementui二次封装tooltip组件

 
<script>
export default {
  name: 'textTooltip',
  props: {
    //文字样式是否使用默认
    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;
      if (this.parentWidth != 0) {
        if (this.parentWidth < contentWidth + 20) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      } else {
        let parentWidth = this.$refs[str].parentNode.offsetWidth;
        console.log(contentWidth,parentWidth,'contentWidth')
        // 判断是否开启tooltip功能
        if (parentWidth != contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      }
    }
  }
}
script>
 
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
 
.tooltip_over {
  display: flex;
 
  .label {
    width: 70px;
  }
 
  .over-flow {
    flex: 1;
    @include ellipsis_more(1);
    word-break: break-all;
  }
}
style>

使用:

<Tooltip
                  :content="mainData.courseContent || '暂无'"
                  refName="tooltipOverCourseContent"
              >
                <label slot="label">课程简介：label>
              Tooltip>