vue中监听ESC事件，全屏退出全屏

**项目是后台管理，常见的架构左侧菜单+右侧内容区域，
里边涉及到可视化，全屏切换的问题，测试提了一个bug，全屏后ESC，取消全屏菜单栏不显示，解决结果如下
**

上代码

首先采用vue中监听退出全屏事件时，按第一下esc键不执行我的事件只退出全屏，按第二下才执行：

 quit() {
                let _this = this;
                document.onkeyup = function (e) {
                    let key = window.event.keyCode;
                    if (key === 27) {
                        console.log('退出全屏')            
                    }
                };
            }

解决办法

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

成功上岸，希望可以帮助到大家

转自：
https://blog.csdn.net/weixin_47673852/article/details/132067529