笔记-vue 二次封装el-tooltip，根据内容长短显示

目标：内容长的时候页面上...显示，tip里显示完整内容，内容短的时候就不需要了

一、自定义组件Tooltip.vue

<template>
  <el-tooltip effect="dark" :placement="placement" :disabled="isDisabled">
    <div class="over-flow" @mouseover="onMouseOver(refName)">
      <span :ref="refName">
        <slot>{{ content }}</slot>
      </span>
    </div>
    <div slot="content">
      <slot>{{ content }}</slot>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: "Tooltip",
  props: {
    // 用于外部调用
    refName: {
      type: String,
      default: 'content'
    },
    //  兼容el-tooltip显示的内容
    content: {
      type: String,
      default: ''
    },
    //  Tooltip 的出现位置,由于项目需要此处默认顶部
    placement: {
      type: String,
      default: 'top-start'
    }
  },
  data() {
    return {
      isDisabled: false // tooltip是否可见
    }
  },
  activated() {
    this.content = this.content.split(';').join('\n');
  },
  methods: {
    // 判断是否开启tooltip功能
    onMouseOver(name) {
      const $refName = this.$refs[name],
        contentWidth = $refName.offsetWidth,
        parentWidth = $refName.parentNode.offsetWidth;
      this.isDisabled = contentWidth <= parentWidth;
    }
  }
}
</script>

<style lang="less" scoped>
//  超出部分隐藏
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  & > span {
    //  元素内禁止换行
    white-space: nowrap;
    //  样式穿透，用于控制插槽内样式
    & ::v-deep > * {
      display: inline;
    }
  }
}
</style>

二、页面引用

<template>
  <div class="dressCard">
    <Tooltip>
        <span v-for="(pip,pIndex) in item.pipeList" :key="pIndex">{{pip.type}}-{{pip.pipeTag}}-{{pip.cargo}}</span>
    </Tooltip>
  </div>
</template>

import { sendWebsocket, closeWebsocket } from '@/utils/websocket';

components: {Tooltip},