1、使用element-plus气泡提升
2、封装js,判断文本是否溢出
// 检查文本是否溢出容器
export const isBeyond = (e) => {
const ev = window.event || e // 浏览器兼容,最好写一下
const textRange = (el) => {
const textContent = el
const targetW = textContent.getBoundingClientRect().width
const range = document.createRange()
range.setStart(textContent, 0)
range.setEnd(textContent, textContent.childNodes.length)
const rangeWidth = range.getBoundingClientRect().width
return rangeWidth > targetW
}
return !textRange(ev.target)
}
3、在项目中如何使用
<el-tooltip :content="item.tableNames" placement="top" :disabled="disabled">
<span class="font-sm text-black-shallow font-weight-400 ellipsis"
@mouseenter="handleMouse($event)">{{ item.tableNames }}</span>
</el-tooltip>
// js部分
const disabled = ref(true) // 检测文字是否溢出
const handleMouse = (e) => {
disabled.value = isBeyond(e);
}
// 定义ellipsis的css样式,设置容器的大小
.ellipsis {
display: inline-block;
white-space: nowrap;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
}