寻找一种仅在元素被截断时显示工具提示的方法答案

【问题标题】：Looking for a way to show tooltip only when the element is truncated寻找一种仅在元素被截断时显示工具提示的方法
【发布时间】：2020-12-10 20:51:46
【问题描述】：

我需要帮助找到解决方案，仅在 span 元素被截断时才显示工具提示元素。

   <q-td v-for="(col,index) in props.cols" :key="col.name" :props="props">
        <span class="truncate">{{ col.value }}</span>
        <q-tooltip content-class="bg-primary" anchor="top middle" self="top middle" v-if="(index===0 || index===4) && col.value">{{ col.value }}</q-tooltip>
    </q-td>

我尝试使用 scrollWidth 和 clientWidth 来执行此操作，但是当我尝试使用 document.getElementById(elementID) 访问 span 元素时，它返回未定义，我假设是因为 span 元素是动态添加的。截断类是这样定义的：

.truncate {
    display: block;
    width: 0;
    min-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

【问题讨论】：

标签： vue.js quasar

【解决方案1】：

您可以创建一种方法来检查您的文本长度，并仅在文本长度大于特定阈值时显示工具提示（因此被截断）。例如：

<q-td v-for="(col,index) in props.cols" :key="col.name">
    <span class="truncate">{{ col.value }}</span>
    <q-tooltip content-class="bg-primary" v-if="isTooltip(col.value)"> 
       {{ col.value }}
    </q-tooltip>
</q-td>

methods: { 
  isTooltip(col) {
    return col.length > 10
  }
}

【讨论】：