vue3+element plus 判断文字是否溢出,溢出显示el-tooltip
用到element plus 表格,:show-overflow-tooltip="true" 属性在 "element-plus": "2.2.27", 版本不支持修改el-tooltip文本的样式:
满足2点需求:①文字只有一行不显示悬浮框;②超出一行显示省略号,鼠标有悬浮框,且保留文本的换行效果。
关键代码:
<el-table-column label="建议内容" align="center" prop="suggestion"> <template #default="scope"> <el-tooltip placement="top" :disabled="!isShowTooltip" effect="light"> <template #content> <div class="all-content">{{ scope.row.suggestion }}</div> </template> <div class="ellipsis-text" @mouseenter="visibilityChange($event)">{{ scope.row.suggestion }}</div> </el-tooltip> </template> </el-table-column>
const isShowTooltip = ref(false); // 判断是否显示 溢出的文本 el-tooltip const visibilityChange = (event) => { const ev = event.target; const evWeight = ev.scrollWidth; const contentWeight = ev.clientWidth; // console.log(ev, evWeight, contentWeight, 1); if (evWeight > contentWeight) { // 实际宽度 > 可视宽度 文字溢出 isShowTooltip.value = true; } else { // 否则为不溢出 isShowTooltip.value = false; } };
// css
<style lang="scss" scoped>
.ellipsis-text {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.all-content {
max-width: 600px;
font-size: 14px;
white-space: pre-wrap;
}
</style>
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战