1、气泡位置偏移这个问题出现,是由于,需求要求打破了常规模式,要求“elementUI表格内容根据高度来判断是否显示气泡”,这时候我们会发现,气泡在底层代码中是以实际高度的位置来判断气泡显示的位置,而不是以我们在样式中设置的height这个判断。
“elementUI表格内容根据高度来判断是否显示气泡” 这个需求的实现见文章 https://blog.csdn.net/CuiCui_web/article/details/106531997
由上图就可以看到,这个问题的根本原因就是上面说的,底层中是以实际高度来判断显示气泡。看过elementUI表格内容根据高度来判断是否显示气泡”
这篇文章你就知道实现这里的气泡,是利用的插槽。这时候,我们只需要在原来基础上加一层结构就可以啦,然后结构上加一个class,编写公共样式,就可以解决这个底层的缺陷问题,
<div class="slot-tooltip-div">
这里放表格单元显示的内容
</div>
样式核心代码为:
样式代码为:
// 固定8行高度超出显示气泡end
/deep/ .el-table.testHeightTip8Row td>
.cell{
max-height: 184px !important;
line-height: 23px;
vertical-align: middle;
white-space: pre-wrap;
text-align: left;
// 插槽气泡位置问题处理
.slot-tooltip-div{
max-height: 184px !important;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 8; /*可以显示的行数,超出部分用...表示 */
-webkit-box-orient: vertical;
}
}
// 固定4行高度超出显示气泡end
/deep/ .el-table.testHeightTip4Row td>
.cell{
max-height: 92px !important;
line-height: 23px;
vertical-align: middle;
white-space: pre-wrap;
text-align: left;
// 插槽气泡位置问题处理
.slot-tooltip-div{
height: 92px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /*可以显示的行数,超出部分用...表示 */
-webkit-box-orient: vertical;
}
}
2、当我们快速切换tab或者菜单,发现,气泡会乱串,在a界面气泡出现在b界面,然后也会消失。这样用户体验非常不好。
也就是下面这个bug描述
为什么会出现这个问题呢?
原因是elementUI底层是用js挂在气泡在body中,每次鼠标移入,都只是通过通过display来控制显示隐藏,实际DOM中还有气泡节点,快速操作过程中,这里display偶现为block的情况,就出现这个bug。
目前系统中涉及本次需求的气泡,是用的v-if控制,传统模式v-if控制显示隐藏,会销毁DOM,但是在气泡这里没有,就是底层是运用js进行挂在
下面介绍一种思路,销毁气泡组件,可能不是最好的方法,但是目前想到的可行的方案。
我们监听路由的变化,然后在这里进行处理,移出且销毁气泡。
用这个方法会有一些副作用,不建议使用(会导致elementUI表格出的min-width属性失效)
后续有更好的方法,再持续更新