BaseTooltip文字提示组件

使用场景：在文本超出指定长度时，缩略成...，鼠标移动上去会弹出完整文本的提示框

实现方式：基于el-tooltip组件进行二次封装，判断el-tooltip是否生效
判断方式：
1、css设置多文本缩略样式：

word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient: vertical;

2、通过文本的实际高度（scrollHeight）和可视高度（clientHeight）判断：
实际高度 > 可视高度  表示文字缩略生效

 组件完整代码：

<!-- 文字提示组件 -->
<template>
  <div class="BaseTooltip">
    <el-tooltip :content="content" :placement="placement" :disabled="!isShowTooltip">
        <div class="multiple-line" ref="baseTooltip" @mouseenter="visibilityChange($event)">
          <span>{{content}}</span>
        </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'BaseTooltip',
  props:{
    lineNum:{
      type:Number,
      default:()=>1
    },
    content:{
      type:String,
      default:() => ''
    },
    placement:{
      type:String,
      default: () => 'top'
    }
  },
  components: {},
  data() {
    return {
      isShowTooltip:false,
    }
  },
  computed: {},
  watch: {
    lineNum:{
      handler(val){
        this.$nextTick(() => {
          if(val) this.$refs.baseTooltip.style['-webkit-line-clamp'] = Number(val)
        })
      },
      immediate:true
    }
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    visibilityChange(event) {
      const ev = event.target;
      const ev_height = ev.scrollHeight; // 文本的实际高度
      const content_height = ev.clientHeight;// 文本的可视高度
      //实际高度 > 可视高度  表示文字缩略生效
      if(ev_height > content_height) return this.isShowTooltip = true;
      this.isShowTooltip = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .BaseTooltip{
    .multiple-line{
      font-size: 18px;
      line-height: 22px;
      word-wrap: break-word;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient: vertical;
    }
  }
</style>