vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題

更新時間：2024年02月28日 09:46:48 作者：Lemon今天學習了嗎

這篇文章主要介紹了vue.js el-tooltip根據(jù)文字長度控制是否提示toolTip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、需求

如何判斷當前文本文字是否超出文本長度，是否需要出現(xiàn)提示toolTip。

效果圖如下：

二、實現(xiàn)

1.表格字段鼠標放置el-popover出現(xiàn) “引用主題”

的具體內容；

<!-- 表格字段：引用主題 -->
<el-table-column
  align="center"
  header-align="center"
  width="100"
  label="引用主題"
  sortable="custom"
  prop="refCnt"
  show-overflow-tooltip
>
<template slot-scope="scope">
    <span v-if="scope.row.refCnt == '0'" style="color: #f56c6c">0</span>
    <el-popover
      v-else
      placement="bottom"
      width="150"
      trigger="hover"
    >
    <ul :data="scope.row?.themeVos" class="ul-popover">
       <li v-for="(item, index) in scope.row?.themeVos" :key="index">
          <el-tooltip
            class="item"
            effect="light"
            :content="item?.themeName"
            placement="top-start"
            :disabled="!isShowTooltip"
         >
            <!-- visibilityChange：鼠標放置后是否展示省略部分；-->
            <!-- class="overflow"：是否超出隱藏出現(xiàn)省略號； -->
            <div @mouseenter="visibilityChange($event)" class="overflow">
                {{ item?.themeName }}
            </div>
        </el-tooltip>
       </li>
     </ul>
     <span
        style="color: #1989fe; cursor: pointer"
        slot="reference"
     >
        {{ scope.row.refCnt }}
     </span>
    </el-popover>
  </template>
</el-table-column>

2.定義isShowTooltip控制是否展示提示文字tooltip

data() {
    return {
        isShowTooltip: false, // 是否顯示提示文字
    }
}

3.對應的鼠標放置觸發(fā)的方法實現(xiàn)

 // 是否提示toolTip
 visibilityChange(event) {
    const ev = event.target
    const ev_weight = ev.scrollWidth // 文本的實際寬度   scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區(qū)后而變大。
    const content_weight = ev.clientWidth // 文本的可視寬度 clientWidth：對象內容的可視區(qū)的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。
    // const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器寬度(父節(jié)點)
    if (ev_weight > content_weight) {
    // 實際寬度 > 可視寬度  文字溢出
        this.isShowTooltip =true
    } else {
        // 否則為不溢出
        this.isShowTooltip = false
    }
  },