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

<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="收缩侧边栏">
    "mid" ref="mid">
    <!--在此处添加遮罩层-->
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="/UploadFiles/2021-04-02/iframeUrl">

添加遮罩层
在以上标注的地方，添加如下代码


<div class="iframeDiv"></div>


再添加遮罩层的css样式即可，此时最好测试点击一下，是不是原来的ifame部分已经不能点击，而且拖拽起来已经不再卡顿了


/* 添加透明遮罩层 */ 
.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1111;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  margin-top: 30px;
  /*display: none;*/
 }



实现遮罩层在拖拽时出现
我的解决办法是直接在拖拽区域添加监听鼠标的按下和松开事件，按下后遮罩层出现，松开后消失，因此修改resize部分，添加onmouseup&mousedown，分别传入参数，用于修改iframeDiv的css样式中的display属性值


<div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
　　"htmlcode">

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   }, 


到此基本就算完成大半了，mousedown为鼠标按下事件，按下后设置display为空，即遮罩层出现，onmouseup为鼠标松开事件，松开后遮罩层消失，达到不影响用户操作查看iframe中内容的目的
页面初始化时遮罩层设置问题
按照实际来讲，初始化进入页面时，我们就不应该留有遮罩层，所以按照我的想法来讲，就是直接在css中修改样式，但是如上所见，我把它注释掉了，至于为什么，先卖个关子，大家修改后尝试一下，看看拖拽时卡顿不卡顿


display: none;


在我本以为这样就可以解决问题时，我发现，首次进入页面，直接进行拖拽，依旧会存在卡顿，但是拖拽过一次之后，就不会再有问题了。这个问题，，我又不知道为什么了，于是，既然它需要拖拽一次之后才不会卡顿，那我就直接注释掉了css中这个display样式，反而在 mounted中添加方法，这样反而成功了，虽然搞不明白两者的差距，但是问题总算是解决了，如果有知道原因的朋友，可以在评论中分享出来，供大家学习学习。


this.changeIframeDivStyle('none');


解决方式
在iframe上添加透明遮罩层样式


<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="收缩侧边栏">
    "mid" ref="mid">
    <!--在此处添加遮罩层-->
   <div class="iframeDiv"></div>
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="/UploadFiles/2021-04-02/iframeUrl">

添加CSS样式


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


添加鼠标的监听事件
在拖拽区添加鼠标的按下事件和松开事件


 <div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
　　"htmlcode">

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   },



设置页面初始化加载


this.changeIframeDivStyle('none');



        

            
上一篇：vue 弹出遮罩层样式实例
            
下一篇：vue中实现拖动调整左右两侧div的宽度的示例代码