vue 文字超长显示...鼠标悬浮显示全部组件封装

vue 文字超长显示...鼠标悬浮显示全部组件封装：

组件 tooltipOver.vue

<template>
  <div class="text-tooltip">
    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
        <span :ref="refName">{{ content || '-' }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
  export default {
    name: 'TooltipOver',
    props: {
      // 显示的文字内容
      content: {
        type: String,
        default: () => {
          return ''
        }
      },
      // 外层框的样式，在传入的这个类名中设置文字显示的宽度
      className: {
        type: String,
        default: () => {
          return ''
        }
      },
      // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
      refName: {
        type: String,
        default: () => {
          return ''
        }
      }
    },
    data() {
      return {
        isShowTooltip: true
      }
    },
    methods: {
      onMouseOver(str) {
        let parentWidth = this.$refs[str].parentNode.offsetWidth
        let contentWidth = this.$refs[str].offsetWidth
        // 判断是否开启tooltip功能
        if (contentWidth > parentWidth) {
          this.isShowTooltip = false
        } else {
          this.isShowTooltip = true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .over-flow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .wid200 {
    width: 100%;
  }
  p{
    margin: 0;
  }
</style>

组件使用：

// msg 为需要显示的文字
<tooltip-over
  :content="msg"
  class="wid200"
  refName="tooltipOver"
/>


// 引入组件
  import tooltipOver  from './tooltipOver'

// 注册组件
  components: {
    tooltipOver,
  },