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

最新推荐文章于 2024-09-04 09:52:51 发布

关忆北_

最新推荐文章于 2024-09-04 09:52:51 发布

阅读量6.4k

点赞数 2

分类专栏：经验记载文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/notagoodwriter/article/details/126868362

版权

经验记载专栏收录该内容

31 篇文章 0 订阅

订阅专栏

起因

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

解决方法

通过度娘我查到了全屏方法 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)        
                }
            });
        });

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

然后改进写法

<template>
  <div id="app">
    <div class="g-container">
      <router-view />
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //监听键盘Esc按键事件
    let that = this;
    window.onresize = () => {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        console.log("退出全屏");
        that.$store.commit("SET_FLAG", true);
      }
    };
  },
  methods: {
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      let isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
};
</script>

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

打完收工