vue.js - 寻找一种仅在元素被截断时显示工具提示的方法
问题描述
我需要帮助找到解决方案,仅在 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;
}
解决方案
您可以创建一种方法来检查您的文本长度,并仅在文本长度大于特定阈值时显示工具提示(因此它被截断)。例如:
<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
}
}
推荐阅读
- java - 我如何将参数传递给构造函数?
- multithreading - 同一个条件变量的定时等待和无限等待?
- c# - Using CSVHelper to read a CSV file and need to extract columns to arrays
- r-markdown - Bookdown/Huskydown 中的表格,具有多种功能(引文、标题、URL、PNG 图……)
- javascript - React - TypeError:this.props.AccountId 不是函数
- pytorch - 如何在张量中复制输入通道?
- java - Apache-poi:无法在 docx 标头中添加图像
- javascript - VueJS Components inside a loop act as one
- emv - 无法通过 BP-Tools 验证密码
- java - 将变量名称永久转换为新类型