vue 全屏实现 element自定义弹框被遮挡

最新推荐文章于 2024-09-04 11:44:21 发布

怪盗基德米

最新推荐文章于 2024-09-04 11:44:21 发布

阅读量2.1k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_40809206/article/details/126303475

版权

前情提要：el-dialog弹框内，点击全屏，实现el-dialog全屏效果

<el-dialog
            width="1400px"
            class="view-dialog"
            :class="{'full-size': isFull}"
            :visible.sync="viewVisible"
            ref="viewDlg"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <!-- 删除按钮 -->
            <i class="icon-delete" :title="isFull ? $t('delete') : ''" v-auth="1005001" @click="handleOneDelete(curFileInfo.data)"></i>
            <div class="view-body">
                <!-- 显示内容 -->
                <!-- ***********
                *********** -->
                <!-- 全屏按钮 -->
                <i class="icon-full" :class="{'active': isFull}" @click="handleFull"></i>
            </div>
        </el-dialog>

全屏方法：

handleFull() {
            // let eleFull = this.$refs.viewDlg.$refs.dialog;
            let eleFull = document.body
            if (this.isFull) {
                // 元素退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    eleFull.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen ) {
                    document.webkitExitFullscreen();
                } else if(document.oCancelFullScreen){
                    document.oCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                // 元素进入全屏
                if (eleFull.requestFullscreen) {
                    eleFull.requestFullscreen();
                } else if (eleFull.mozRequestFullScreen) {
                    eleFull.mozRequestFullScreen();
                } else if (eleFull.webkitRequestFullScreen) {
                    eleFull.webkitRequestFullScreen();
                } else if (eleFull.oRequestFullscreen) {
                    eleFull.oRequestFullscreen();
                } else if (eleFull.msRequestFullscreen) {
                    // IE11才支持
                    eleFull.msRequestFullscreen();
                } else {
                    console.log('not support full screen');
                }
            }
        }

值得注意的是之前用全屏的元素使用this.$refs.viewDlg.$refs.dialog，导致调用vue 组件this.$confirm(）会出现被覆盖的问题，是由于：

所用到的组件为element的组件，该弹窗组件会生成在body中，和项目主体app为平行关系，项目主体全屏后，层级最高，弹出会被盖在app层级下面，不能显示。

解决办法：不要使用某个元素全屏，使整个body全屏

参考资料：调用requestFullscreen使dom全屏时，element组件被隐藏 - SegmentFault 思否