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

爱心觉罗晓宇

于 2023-11-22 17:52:02 发布

阅读量306

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44716001/article/details/134559047

版权

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

            </div>
          <div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
　　⋮
  </div>
            <div class="mid" ref="mid">
                <!--在此处添加遮罩层-->
                <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
                        :src="iframeUrl">
                </iframe>
            </div>
        </div>


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

mounted(){
this.changeIframeDivStyle('none');
}

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

注意box能使用定位等布局