思路:
css:label溢出隐藏,出现省略号代码自行百度
html结构:
<el-checkbox :name="item.identifying" :label="item.neirong">
<el-tooltip placement="top" :disabled="item.showTooltipname" :content="item.neirong">
<div
class="myNote"
@mouseenter="showToopltip($event, item, 'neirong','showTooltipname')"
>{{ item.neirong }}</div>
</el-tooltip>
</el-checkbox>
js逻辑思路:
- js移入事件 mouseenter 获取当前移入的元素
- 封装函数动态获取当前移入的label的宽度也就是checkbox文字部分
- 动态创建span span里面的文本就是label的文本,并获取宽度
- 动态拿到的label宽度和span的宽度对比
- 如果span的宽度大于label的宽度 就让Tooltip组件 disabled属性为false 反之true js逻辑代码:
export const showToopltip = (obj, row, columnName, show) => {
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
* @enum columnName 表示显示的变量
* @enum show toopltip disabled属性的变量
*/
if (row[columnName]) { //如果为空值的话 不用再创建dom元素 影响性能\
let TemporaryTag = document.createElement("span");
TemporaryTag.innerText = row[columnName];
TemporaryTag.className = "getTextWidth";
document.querySelector("body").appendChild(TemporaryTag);
let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
document.querySelector(".getTextWidth").remove();
const cellWidth = obj.target.parentNode.offsetWidth;
currentWidth <= cellWidth + 10 ? (row[show] = true) : (row[show] = false);
} else {
row[show] = true;
}
};