vue文字超长自动poptip

组件

poptip用的是boya组件，样式根据需要自己调整下

<template>
  <div class="text-poptip-component" @mouseenter="onTextMouseEnter" @mouseleave="onTextMouseLeave">
    <div v-show="isShow" ref="textnopop" class="text-no-poptip">{{ text }}</div>
    <Poptip
      v-show="!isShow"
      word-wrap
      :width="poptipWidth"
      trigger="hover"
      :placement="placement"
      :content="text"
    >
      <div class="text-poptip">{{ text }}</div>
    </Poptip>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: '--'
    },
    placement: {
      type: String,
      default: 'top-start'
    }
  },
  data() {
    return {
      isShow: true,
      poptipWidth: 300
    }
  },
  methods: {
    onTextMouseEnter() {
      const obj = this.$refs.textnopop
      this.isShow = obj.offsetWidth >= obj.scrollWidth
      this.poptipWidth = obj.offsetWidth
    },
    onTextMouseLeave() {
      this.isShow = true
    }
  }
}
</script>
<style lang="less" scoped>
.by-poptip {
  width: 100%;
}
/deep/ .by-poptip-rel {
  width: 100%;
}
.text-poptip-component {
  display: inline-block;
  vertical-align: top;
  zoom: 1
}
.text-poptip {
  width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 20px;
}
.text-no-poptip {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 20px;
}
</style>

引用后调用

注意在调用时指定宽度

<TextPoptip text="很多很多的很长很长的文字-很多很多的很长很长的文字-很多很多的很长很长的文字-很多很多的很长很长的文字" placement="bottom-start" style="width: calc(100% - 120px)" />