<template>
  <div class="dsk-text-over-flow-tip">
    <el-tooltip class="item" placement="top" effect="dark" ref="elToolTip" :disabled="tipDisable">
      <div class="text-over-flow-tip-inner" :class="[$attrs['custom-class'] ? $attrs['custom-class'] : '' ]" @mouseover.stop.self="textHover">
        <slot></slot>
      </div>
      <template slot="content">
        <slot name="overflow"></slot>
      </template>
    </el-tooltip>
  </div>
</template>
<script>
// 只能传入一个根元素 不能多级
export default {
  name: "dskTextOverFlowTip",
  data() {
    return {
      tipDisable: true
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    textHover(e) {
      /** 
       * @type {{
       * target : HTMLDivElement
       * }}
      */
      const { target } = e;
      const clientWidth = target.clientWidth;
      const scrollWidth = target.scrollWidth;
      if (scrollWidth > clientWidth) {
        this.tipDisable = false;
      } else {
        this.tipDisable = true;
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.dsk-text-over-flow-tip {
  width: 100%;

  .text-over-flow-tip-inner {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
