基於 element-ui 封裝的文本 tooltip，超出顯示

<template>
  <el-tooltip
    effect="dark"
    :content="content"
    placement="top-end"
    :disabled="isShowTooltip"
    v-bind="$attrs"
    :open-delay="200"
  >
    <div class="text-wrap" @mouseover="onMouseOver">
      <span ref="text">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
import { Tooltip } from 'element-ui'
export default {
  name: 'text-tooltip',
  props: ['text'],
  components: {
    Tooltip
  },
  data() {
    return {
      isShowTooltip: false,
      content: "",
    };
  },
  methods: {
    onMouseOver(str) {
      // 內容超出，顯示文字提示內容
      const tag = this.$refs.text;
      const parentWidth = tag.parentNode.offsetWidth; // 獲取元素父級可視寬度
      const contentWidth = tag.offsetWidth; // 獲取元素可視寬度
      this.isShowTooltip = contentWidth <= parentWidth;
      // 鼠標懸停后顯示的內容
      this.content = this.text;
    }
  },
};
</script>

<style scoped>
.text-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>