el-tooltip二次封裝，只有文本溢出時才顯示

項目需求：需要給超出的文本加提示，沒超出的不加提示，這里我使用的是el-tooltip組件。el-tooltip組件本身就是懸浮提示功能，所以對組件進行了二次封裝（下面代碼可以直接復制使用，哈哈）。

注意。這里主要是用了el-tooltip組件的disabled屬性。

<template>
  <el-tooltip :effect="effect" :content="text" :placement="placement" :disabled="isShowTooltip">
    <div class="text-ellipsis" :class="className" @mouseover="onMouseOver">
      <span ref="ellipsis">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    placement: {
      type: String,
      default: 'right-start',
    },
    text: {
      type: String,
      default: '',
    },
    effect: {
      type: String,
      default: 'dark',
    },
    className: { type: String, default: '' },
  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  created() {},
  methods: {
    onMouseOver() {
      let parentWidth = this.$refs['ellipsis'].parentNode.offsetWidth; // 獲取元素父級可視寬度
      let contentWidth = this.$refs['ellipsis'].offsetWidth; // 獲取元素可視寬度
      this.isShowTooltip = contentWidth <= parentWidth;
    },
  },
};
</script>
<style scoped lang="less">
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

然后在需要用到組件的頁面中引入。

使用：

<tool-tip
    :text="碼云筆記-前端博客-前端教程-記錄web前端開發的個人技術博客"
    :placement="'left'"
>
</tool-tip>