基于element-ui二次封装tooltip,实现悬浮文字超出显示省略并提示

// data > slot.content > slot.default
// 插槽中必须使用行内标签

// 示例：
// <MyTooltip>
//     <span slot="content">
//         我是content，默认显示 this.$slot.default
//     </span>
//     <span>
//         我是default
//     </span>
// </MyTooltip>
<script>
export default {
  name: "MyTooltip",
  props: {
    data: {
      type: [String, Number],
      default: "",
    },
    // 设置第几行隐藏
    row: {
      default: 1,
    },
    // 主题
    effect: {
      type: String,
      default: "dark",
    },
    // 提示框中的内容重新自定义，需要加 slot='content' 来使用
    content: {
      default: "",
    },
    // 提示框的位置
    position: {
      type: String,
      default: "top-start",
    },
    // 默认不显示箭头
    arrow: {
      type: Boolean,
      default: false,
    },
    // ！！！！强制开启，不省略也有提示
    enable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    internalData() {
      return this.data === 0 ? "0" : this.data;
    },
    rowclass() {
      if (this.row == 1) {
        return "one-row";
      } else {
        return "multi-row";
      }
    },
  },
  data() {
    return {
      isTooltip: false,
    };
  },
  methods: {
    onMouseEnter: function (e) {
      if (this.enable) {
        this.isTooltip = false;
      } else {
        if (e.target.scrollWidth > e.target.clientWidth) {
          this.isTooltip = false;
        } else {
          this.isTooltip = true;
        }
      }
    },
    onMouseEnter2: function (e) {
      if (e.target.scrollHeight > e.target.clientHeight) {
        this.isTooltip = false;
      } else {
        this.isTooltip = true;
      }
    },
  },
  render(h) {
    let content = this.internalData || this.$slots.default || "-";
    let node = (
      <el-tooltip
        tabindex={null}
        visible-arrow={this.arrow}
        placement={this.position}
        disabled={this.isTooltip}
        effect={this.effect}
        popper-class="my-tooltip"
      >
        <span slot="content">
          <slot name="content">
            {this.internalData || this.$slots.content || this.$slots.default}
          </slot>
        </span>
        <span
          style={{ "-webkit-line-clamp": this.row == 1 ? "unset" : this.row }}
          class={["my-tooltip-txt", this.rowclass]}
          onMouseenter={() => {
            this.row == 1
              ? this.onMouseEnter(event)
              : this.onMouseEnter2(event);
          }}
        >
          {content}
        </span>
      </el-tooltip>
    );
    return node;
  },
};
</script>