el-tooltip动态根据内容是否超出隐藏来进行显示_el-tooltip placement

平常项目中经常出现文本内容过长需要处理成省略的形式，有一些需求要求hover时将隐藏后的文本全部显示出来，如果内容不长整好显示完整则不需要hover显示，这时需要组件进行特殊处理。

代码如下：

<template>
  <div class="tooltip-wrap">
    <el-tooltip
      ref="tlp"
      :content="text"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
      class="tooltip">
      <span :class="className" @mouseenter="visibilityChange($event)">{{text}}</span>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  name: 'ellipsisTooltip',
  props: {
    text: { // 文本内容
      type: String,
      default: () => ''
    },
    className: {
      type: String,
      default: () => 'text'
    },
    placement: {
      type: String,
      default: () => 'top-start'
    }
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    }
  },
  mounted() {
  },
  methods: {
    visibilityChange(e) {
      const ev = e.target
      const evWidth = ev.offsetWidth
      const contentWidth = this.$refs.tlp.$el.parentNode.clientWidth
      this.tooltipFlag = contentWidth < evWidth
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .tooltip-wrap{
    overflow: hidden;
    text-overflow: ellipsis;
    span{
      white-space: nowrap;
    }
  }
</style>

通过import引用并且创建该组件

import ellipsisTooltip from '@/components/ellipsisTooltip'
components: {
  ellipsisTooltip
}

 引用创建后的组件传入需要处理的文本内容即可，代码如下：

<span>
    <ellipsisTooltip text="内容" />
</span>