vue 页面全屏,浏览器如何取消全屏

1.首先要判断浏览器类型 （是否IE），来控制是否展示功能，在计算属性中判断：

computed: { showFullScreenBtn () { return window.navigator.userAgent.indexOf('MSIE') < 0; }},

2.vue代码：

<i v-if="showFullScreenBtn" :class="isFullScreen?'el-icon-crop':'el-icon-full-screen'" class="backPage" @click="fullScreenLoad()">{{isFullScreen?'退出全屏':'全屏'}}</i>

3. isFullScreen变量和fullScreenLoad()方法控制是否全屏或者退出全屏

fullScreenLoad(){ if(this.isFullScreen){ // 退出全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }else{ // 全屏显示 if (document.body.requestFullscreen) { document.body.requestFullscreen(); } else if (document.body.mozRequestFullScreen) { document.body.mozRequestFullScreen(); } else if (document.body.webkitRequestFullScreen) { document.body.webkitRequestFullScreen(); } else if (document.body.msRequestFullscreen) { document.body.msRequestFullscreen(); } } }

4.created中监听各个浏览器全屏事件，控制isFullScreen

created(){ //监听各浏览器fullscreenchange 事件处理 document.addEventListener('fullscreenchange', () => { this.isFullScreen=!this.isFullScreen }); document.addEventListener('mozfullscreenchange', () => { this.isFullScreen=!this.isFullScreen }); document.addEventListener('webkitfullscreenchange', () => { this.isFullScreen=!this.isFullScreen }); document.addEventListener('msfullscreenchange', () => { this.isFullScreen=!this.isFullScreen }); },