vuejs全屏监听esc问题

最新推荐文章于 2024-03-06 10:29:06 发布

置顶一小趴菜

最新推荐文章于 2024-03-06 10:29:06 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js 全屏功能 vuejs全屏实现 js全屏监听esc js全屏退出问题

本文链接：https://blog.csdn.net/qq_40745466/article/details/103070183

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍在Vue.js中实现元素全屏及通过ESC键退出全屏的方法，包括使用不同浏览器API判断全屏状态及监听全屏变化事件。

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

vue.js全屏监听esc退出全屏问题，因全屏无法监听退出全屏状态，话不多说直接上代码

map.vue

<div id="map" @click="bigSmall"> …  </div>

</template>

js代码如下

mounted() {
    window.onresize = function(){
        setTimeout(()=>{
            if(!that.fullscreenElement()){
                that.isShowBigSmall = false
            }
        })
    };
}
methods: {
    //这是判断全屏状态的
    fullscreenElement(){
       var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement ||             
       document.webkitFullscreenElement;
       return fullscreenEle;
    },
   //点击全屏或退出全屏
   bigSmall() {
     if (this.isShowBigSmall) {
         document.exitFullscreen ? document.exitFullscreen() :
         document.mozCancelFullScreen ? document.mozCancelFullScreen() :
         document.webkitCancelFullScreen ? document.webkitCancelFullScreen() :
         document.msExitRequestFullscreen ? document.msExitRequestFullscreen() :
         document.msExitFullscreen ? document.msExitFullscreen() : ''
     } else {
         var docElm = document.getElementById('map');
         docElm.requestFullscreen ? docElm.requestFullscreen() :
         docElm.mozRequestFullScreen ? docElm.mozRequestFullScreen() :
         docElm.webkitRequestFullScreen ? docElm.webkitRequestFullScreen() :
         docElm.msRequestFullscreen ? docElm.msRequestFullscreen() : ''
     }
     this.isShowBigSmall = !this.isShowBigSmall;
   },
}

或者可以用事件监听的方式实现如下

document.addEventListener('webkitfullscreenchange', function(e) {
        if (!(e.currentTarget.webkitIsFullScreen)) {
            
            console.log('退出啊webkitIsFullScreen')
        } else {
            console.log('进入webkitIsFullScreen')
        }
});

document.addEventListener('fullscreenchange', function(e){
        
        if(!document.fullscreenElement){
            console.log('退出啊fullscreenchange')
        }else{
            console.log('进入fullscreenchange')
        }
});

     document.addEventListener('MSFullscreenChange', function(e){
        if(!document.msFullscreenElement){
            console.log('IE退出')
        }else{
            console.log('IE进')
        }
    });
    document.addEventListener('mozfullscreenchange', function(e){
        if(!document.mozFullScreenElement){
            console.log('火狐退出')
        }else{
            console.log('火狐进')
        }
    });

以上仅供参考谢谢！！！