el-tooltip 控制文本超出范围时再触发提示

 

 初始状态下鼠标移入红色框就会提示，数据量过大有滚动条情况下会影响体验。

关键代码标红处理

                          <el-tooltip :disabled="!tooltipFlag" class="item" effect="dark" placement="top">
                            <template slot="content">
                              <p style="max-width:500px;">{{ item['baseInfo.title'] }}</p>
                            </template>
                            <p @mouseenter="visibilityChange($event)" v-html="item['baseInfo.title']" @click="searchDetail(item.aid)" class="info-mes pointer"
                               style="  display:-webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                font-weight: 700;
                          "></p>
                          </el-tooltip>

data定义

tooltipFlag: false,

methods

    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target
      if (ev.clientHeight < ev.scrollHeight) {
        // 实际内容高度 > 文本高度 =》内容溢出
        this.tooltipFlag = true // NameIsIncludeWord ? true : !!false
      } else {
        // 否则为不溢出
        this.tooltipFlag = false
      }
    },

原理判断实际内容高度大于容器高度

 

 

 

 如果出现闪烁出现滚动条情况可以对出现滚动条区域进行overflow:hidden处理，前提不要影响其他，自行判断。