VUE在浏览器全屏下监听Esc键盘事件

说明:

  1. 实测可以在谷歌、火狐、360 浏览器使用

  2. 解决了在浏览器全屏下监听不到键盘Esc事件

  3. 解决了取消全屏和全屏的同步问题,ESC按键下可以同步

实例: 

<!--html-->
<!-- 全屏显示 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div>
 
//
data() {
                return {
              
                fullscreen: false, // 全屏状态 true为全屏 false反之
               
            }
        },
 
created(){
			window.onresize = ()=> {
				if(!this.checkFull()){
					// 退出全屏后要执行的动作
					console.log("退出全屏")
					this.fullscreen = false;
				}
			}
		},
 
 methods:{
        // 判断全屏
		checkFull(){
		//判断浏览器是否处于全屏状态 (需要考虑兼容问题)
		//火狐浏览器
		var isFull = document.mozFullScreen||
		document.fullScreen ||
		//谷歌浏览器及Webkit内核浏览器
		document.webkitIsFullScreen ||
		document.webkitRequestFullScreen ||
		document.mozRequestFullScreen ||
		document.msFullscreenEnabled
		if(isFull === undefined) {
        isFull = false
        }
        return isFull;
 
	},
}

 


版权声明:本文为caseywei原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。