vue 全屏和取消全屏，选择文件（上传图片等）时状态出现异常，选择文件时退出全屏状态

草字

已于 2022-10-12 15:17:55 修改

阅读量2.2k

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

于 2022-03-08 17:43:42 首次发布

本文链接：https://blog.csdn.net/qq_42740797/article/details/123359200

版权

Vue 专栏收录该内容

135 篇文章 3 订阅

订阅专栏

vue推荐使用插件screenfull。

代码：

<div class="alignCenter mr10 active_t" @click="handleFullScreen" style="font-size: 16px;color: #999;">
                        <Icon type="md-resize" style="font-size: 16px;" />
                        <span style="margin-left:2px;">{{fullscreen?`取消全屏`:`全屏`}}</span>
                    </div>

// 全屏事件
        handleFullScreen() {
                // 此处可根据获取节点进行区域全屏事件
            let element = document.documentElement;
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullscreen = !this.fullscreen;
        },

选择文件（上传图片等）时状态出现异常：

考虑到如果点击上传文件或者快捷键控制全屏，状态会不一致，所以需要在mounted里面进行监听全屏状态：

        var that=this;
        //监听window是否全屏，并进行相应的操作,支持esc键退出
        window.onresize = function() {
            var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
                document.msFullscreenElement || document.fullscreenElement
            );//!document.webkitIsFullScreen都为true。因此用!!
            if (isFull==false) {
                that.fullscreen = false;
            }else{
                that.fullscreen = true;
            }
        }