基于elementui二次封装tooltip组件

smouns_2023-11-20 11:24

javascript 复制代码

<template>
  <div 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?'#999':'','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: {
    //文字样式是否使用默认
    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>

使用:

javascript 复制代码

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