vue实现页面全屏和退出全屏

pc端使用vue实现页面全屏和退出全屏

element.requestFullScreen() -- 全屏显示  

1.  Element.requestFullscreen()方法用于 异步请求使得Element（该元素）全屏显示。 Element.requestFullscreen()不能保证该元素被设置为全屏模式，如果允许该元素进入全屏模式，document将接受到fullscreenchange event事件；如果不允许，则document将接受fullscreenerror event事件。
2. 注意： 在调用Element.requestFullScreen()前，可建立 fullscreenchange和fullscreenerror 的事件处理，将方便调试是否成功请求全屏模式。
3. 浏览器的兼容性

• chrome（谷歌浏览器、android浏览器） webkitRequestFullScreen()
• firefox（火狐浏览器） mozRequestFullScreen() Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏； 在Firefox 44+,允许在顶层document（即body）内的元素或者<iframe>内的元素设置 allowfullScreen属性，则允许请求全屏显示；  
• IE msRequestFullScreen()
• Opera oRequestFullScreen() 

document.exitFullSreen() --退出全屏模式

• chrome（谷歌浏览器、android浏览器）webkitExitFullScreen()
• firefox（火狐浏览器）mozCancleFullScreen()Firefox 44 前的浏览器不允许在<frame>或<object>内的元素请求全屏；在Firefox 44+,允许在顶层document（即body）内的元素或者<iframe>内的元素设置 allowfullScreen属性，则允许请求全屏显示；
• IE msExitFullScreen()
• Opera oExitFullScreen()

<div @click="handleFullScreen">
   {{this.fullscreen ? '退出全屏':'全屏'}}
</div>

// js
data() {
    return {
        fullscreen: false  // 是否全屏
    }
},
methods: {
    // 全屏事件
    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();
            }
            console.log('已还原！');
        } 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();
            }
            console.log('已全屏！');
        }
        // 改变当前全屏状态
        this.fullscreen = !this.fullscreen;
    }
}

Tip：

document.mozFullScreenElement：返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null.

document.mozFullScreenElement - Web API 接口参考 | MDN