vue中解决拖拽改变宽度存在iframe时卡顿问题

基于上篇博客《vue实现拖拽修改左右两侧元素宽度》与《vue实现拖拽修改当前元素宽度》，当页面中存在iframe页面，鼠标快速拖拽时会存在卡顿。如果没有iframe，则不会卡顿。

实现效果

解决思路

在iframe上方添加透明遮罩层，在鼠标按下（mousedown）的时候出现，鼠标松开（mouseip）的时候消失，可解决该问题

HTML

resize上添加了mousedown与mouseup方法
iframe前添加了遮罩层iframeDiv

<div class="box" ref="box">
  <div class="left" ref="left">左边测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  <div class="resize" ref="resizeDom" @mousedown="changeIframeDivStyle('')" @mouseup="changeIframeDivStyle('none')">⋮</div>
  <div class="mid" ref="mid">
    <div class="iframeDiv" ref="iframeDiv"></div>
    <iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</div>

CSS

.iframeDiv {
   width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1111;
    filter: alpha(opacity=0);
    opacity: 0;
    background: transparent;
    margin-top: 30px;
}

实现方法

mounted() {
	//...其余方法
	this.changeIframeDivStyle('none');
},
methods: {
	//...其余方法
	changeIframeDivStyle(display) {
		var iframeDiv = this.$refs.iframeDiv
		iframeDiv.style.display = display;
	}
}