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

最新推荐文章于 2024-08-08 15:35:14 发布

爱心觉罗晓宇

最新推荐文章于 2024-08-08 15:35:14 发布

阅读量403

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44716001/article/details/134559047

版权

文章描述了一个使用Vue.js开发的网页应用，其中包含一个可显示或隐藏的iframe元素，配合遮罩层功能。开发者展示了如何通过JavaScript控制iframeDiv的显示状态以及相关的CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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能使用定位等布局