vue中解决拖拽改变存在iframe的div大小时卡顿问题

在Vue开发过程中，拖拽操作是一项常见的交互设计，特别是在构建可自定义布局的应用时。然而，当涉及到在拖拽过程中改变包含iframe的div大小时，可能会遇到卡顿问题。这主要是由于iframe在拖动过程中对鼠标事件的处理，尤其是在拖动速度较快时，可能导致鼠标移动超出拖拽范围，进入iframe，触发iframe内容的加载，从而引起卡顿。 为了解决这个问题，我们可以采用一种策略：在拖动时，在iframe上方添加一个透明的遮罩层，以防止鼠标事件穿透到iframe中。当拖拽结束时，移除这个遮罩层，恢复正常交互。这种方法有效地避免了iframe在拖动过程中的卡顿现象。 我们需要在HTML组件中添加一个遮罩层。在Vue组件的模板中，找到包含iframe的部分，添加一个新的div，class名为"iframeDiv"，如下所示： ```html <div class="mid" ref="mid"> <!-- 在此处添加遮罩层 --> <div class="iframeDiv"></div> <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto" :src="iframeUrl"></iframe> </div> ``` 接下来，我们需要为这个遮罩层设置CSS样式，使其完全覆盖iframe，并且透明不可见，如下： ```css .iframeDiv { width: 100%; height: 100%; position: absolute; z-index: 1111; filter: alpha(opacity=0); opacity: 0; background: transparent; margin-top: 30px; } ``` 为了让遮罩层在拖动时显示，我们需要监听拖动的鼠标事件。在Vue组件的methods中，添加`changeIframeDivStyle`方法，用来控制遮罩层的显示与隐藏。同时，修改`resize`部分的事件监听器，如下： ```html <div class="resize" ref="resize" @mousedown="changeIframeDivStyle('block')" @mouseup="changeIframeDivStyle('none')"> ... </div> ``` 在Vue组件的方法中添加`changeIframeDivStyle`： ```javascript methods: { changeIframeDivStyle(display) { var iframeDiv = document.getElementsByClassName('iframeDiv'); iframeDiv[0].style.display = display; } } ``` 通过这种方式，当鼠标按下时，遮罩层显示，阻止鼠标事件传递到iframe；当鼠标松开时，遮罩层隐藏，恢复正常的iframe交互。这样，我们就成功地解决了Vue中拖拽改变含有iframe的div大小时的卡顿问题。 总结来说，解决Vue拖拽div卡顿的关键在于创建一个透明遮罩层，并在拖动过程中控制它的显示与隐藏。通过这样的优化，可以显著提高用户在拖拽调整iframe div大小时的体验，使得操作流畅无卡顿。