vuejs全屏监听esc问题

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

map.vue

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('火狐进')
        }
    });

以上仅供参考 谢谢!!!

你可能感兴趣的:(前端,js,全屏功能,vuejs全屏实现,js全屏监听esc,js全屏退出问题)