vue+el-tooltip 封装提示框组件，只有溢出才提示

效果

封装思路

1. 通过控制el-tooltip的disabled属性控制是否提示
2. 通过在内容上绑定mouseenter事件监听内容宽度和可视宽度，判断内容是否溢出

封装代码

<template&gt;
  <div style="display: flex" class="column-overflow"&gt;
    <el-tooltip :content="content" placement="top" :disabled="!isShowTooltip"&gt;
      <div
        class="column-overflow__hidden"
        @mouseenter="visibilityChange($event)"
      >
        {{ content || '--' }}
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    direction: {
      type: String,
      default: 'horizontal'
    }
  },
  data() {
    return {
      isShowTooltip: false
    };
  },
  methods: {
    visibilityChange(event) {
      const ev = event.target;
      let ev_size = ev.scrollWidth;
      let content_size = ev.clientWidth;
      if (this.direction === 'vertical') {
        ev_size = ev.scrollHeight;
        content_size = ev.clientHeight;
      }
      if (ev_size > content_size) {
        this.isShowTooltip = true;
      } else {
        this.isShowTooltip = false;
      }
    }
  }
};
</script>

<style lang="less">
.column-overflow {
  width: 100%;
  &amp;__hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

使用代码

<column-overflowa
  :content="contentInfo"
></column-overflow>

代码007普通

打赏 收藏 海报 链接