记录一次web浏览器的全屏事件处理

作为web大屏设计中，全屏事件是应该不会少的一个按钮事件。

那么首先我们肯定要先定义一个变量来定义是否全屏。

data() {
    return {
        fullscreen: false // 是否全屏
    }
}

然后再在方法里面写好判断全屏事件处理

methods: {
    /**
     * 执行判断执行事件
     * @param {*} doc // dom节点
     */
    handleFullScreen(doc) {
        // 做多一层处理（可传dom节点也可不传dom节点）
        let element = null;
        if (doc) {
            element = document.querySelector(doc); // 容器全屏
        } else {
            element = document.documentElement; // 容器全屏
        }
        if (this.fullscreen) { // 不全屏（兼容多个浏览器）
            if (document.fullscreenElement !== null) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        } else { // 全屏（兼容多个浏览器）
            // element.style.backgroundColor = 'white';
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }
    }
} 

做到这里此时，全屏事件一般就可以实现的了。

问题：但是web浏览器默认F11是执行全屏事件的，那么此时就会出现一个问题，F11全屏后，再点击这个handleFullScreen全屏事件就会出问题啦。因为此时的fullscreen的状态并没有随着F11的全屏改变而改变。

解决：监听F11和全局事件

methods: {
    /**
    * 监听f11
    * @param {*} event 
    */
    KeyDown(event) {
        if (event.keyCode === 122) {
            event.returnValue = false;
            // 直接触发点击事件（可能有时候会有保错--浏览器的问题）
            this.handleFullScreen();
        }
    },
    // 监听fullscreen参数（这样能真正得获取到fullscreen的真实值）
    setFullScreen() {
      let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
      if (!isFull) {
        this.fullscreen = false;
      } else {
        this.fullscreen = true;
      }
    }
},
mounted() {
    // 默认取第一次的是否全屏
    let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    this.fullscreen = !!isFull
    // 监听
    window.addEventListener("keydown", this.KeyDown, true)
    window.addEventListener("resize", this.setFullScreen)
},
beforeDestroy() {
    // 取消监听
    window.removeEventListener("keydown", this.KeyDown, true)
    window.removeEventListener("resize", this.setFullScreen)
}

把上面的整理写成一个混入，哪里需要就哪里引入

/**
 * 全屏事件处理
 */
export default {
  data() {
    return {
      fullscreen: false // 是否全屏
    }
  },
  methods: {
    /**
     * 监听f11
     * @param {*} event 
     */
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        // 直接触发点击事件（可能有时候会有保错--浏览器的问题）
        this.handleFullScreen();
      }
    },
    /**
     * 执行判断执行事件
     * @param {*} doc 
     */
    handleFullScreen(doc) {
      let element = null;
      if (doc) {
        element = document.querySelector(doc); // 容器全屏
      } else {
        element = document.documentElement; // 容器全屏
      }
      if (this.fullscreen) { // 不全屏
        if (document.fullscreenElement !== null) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      } else { // 全屏
        // element.style.backgroundColor = 'white';
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    },
    // 监听fullscreen参数（这样能真正得获取到fullscreen的真实值）
    setFullScreen() {
      let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
      if (!isFull) {
        this.fullscreen = false;
      } else {
        this.fullscreen = true;
      }
    }
  },
  mounted() {
    // 默认取第一次的是否全屏
    let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    this.fullscreen = !!isFull
    // 监听
    window.addEventListener("keydown", this.KeyDown, true)
    window.addEventListener("resize", this.setFullScreen)
  },
  beforeDestroy() {
    // 取消监听
    window.removeEventListener("keydown", this.KeyDown, true)
    window.removeEventListener("resize", this.setFullScreen)
  }
}

<template>
    <button @click="handleIcon"></button>
</template>
<script>
import fullscreen from "@/mixin/fullscreen.js";
export default {
    mixins: [fullscreen], // handleFullScreen()
    methods: {
        handleIcon() {
          this.handleFullScreen();
        }
    }
}
</script>

此时，完成了这个全屏事件的处理了。