问题:弹窗里面是iframe,弹窗可以拉伸改变大小,鼠标拖动的时候会出现卡顿,没有iframe则不会卡顿。
思路:在拖拽过程中改变包含iframe的div大小时,可能会遇到卡顿问题。这主要是由于iframe在拖动过程中对鼠标事件的处理,尤其是在拖动速度较快时,可能导致鼠标移动超出拖拽范围,进入iframe,触发iframe内容的加载,从而引起卡顿。
解决:增加一个遮罩层,盖住iframe,拖拽的时候显示,不拖拽的时候隐藏
<div class="iframeCover" :class="isMove?'visible':''"></div>
.iframeCover {
position: absolute;
left: 0;
top:0;
right: 20px;
bottom: 20px;
z-index:9999;
display: none;
}
.visible {
display: block;
}