前端vue实现点击实现F11全屏以及全屏后监听不到键盘事件解决方法

起因

用户提出的一个小需求  要在右上角加上一个点击全屏的按钮

 解决方法

通过度娘我查到了全屏方法  document.documentElement.webkitRequestFullscreen()  ，跟取消全屏方法  document.webkitExitFullscreen()  ，接下来就是解决了

首先  我们得定义一个值去判断，用户当前点的是全屏还是关闭全屏，这里我决定声明一个flag去判断，其次得考虑  用户在该页面全屏之后切入到其他页面在切回来取消，这样的话 ，这个flag就不能声明在组件里  得声明到全局  所以我就写到vuex里了

写法如下

众所周知  vuex  state声明常量，想要修改state里的值 必须得通过mutations，代码如下 可直接复制

state: {
   flag: true
 },
mutations: {
   SET_FLAG: (state, data) => { //全屏  退出全屏判断
      state.flag = data
   },
}

 其次就是在页面里写事件了

fillScreen(){
  if (this.$store.state.data.flag){
     // 全屏
     document.documentElement.webkitRequestFullscreen()
     this.$store.commit('SET_FLAG', false)
   } else {
     // 退出全屏
     document.webkitExitFullscreen()
     this.$store.commit('SET_FLAG', true)
   }
},

这样就完成了简单的点击事件触发全屏跟非全屏事件了

再然后  我们得考虑当用户全屏按下Esc之后退出全屏，我们vuex里的值没变，所以在点击事件触发后，第一次是没有任何反应的，所以我在App.vue里写上了监听

    mounted() {
        //监听键盘Esc按键事件
        let self = this;
        this.$nextTick(function() {
            document.addEventListener('keydown', function(e) {
                //此处填写你的业务逻辑即可
                if (e.keyCode == 27) {
                    self.$store.commit('SET_FLAG', true)        
                }
            });
        });

接下来，好玩的来了 ，我发现全屏之后 ，根本就监听不到键盘按下触发的事件

然后改进写法

通过window.onresize这个原生监听视口宽度的方法  去调用下方的原生判断是否是全屏来完成的

打完收工