vue中实现浏览器全屏与退出全屏功能

在 <template> 标签中主要是放一个全屏与退出全屏的按钮，并绑定上点击事件 fullScreenClick 。全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的。

<template>
  <el-tooltip effect="dark"
    :content="fullScreen ? '全屏操作': '退出全屏'"
    placement="right">
    <span @click="fullScreenClick">
      <i class="iconfont" :class="[{  'iconf-quanping': !fullScreen,  'iconf-tuichuquanping': fullScreen }]"></i>
    </li>
  </el-tooltip>
</template>

在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。（如果全屏是单一页面的功能，记得在组件销毁的时候清除掉 window 中 resize 事件的绑定）。

data() {
  return {
    //设置当前全屏状态的初始值为 false
    fullScreen: false,
  }
},
mounted() {
  //由于 全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件
  window.addEventListener("resize", function () {
    //增加 timer 定时器的原因是全屏和退出全屏的事件会触发两次窗口大小改变事件，做一次过滤
    if (this.timer) return;
    this.timer = setTimeout(() => {
      // 如果是按 "Esc" 键退出全屏，窗口状态已经是非全屏，但是之前记录的状态还是全屏的状态
      if (!this.checkFull() && this.fullScreen) {
        //退出全屏状态。。。
        this.fullScreen = false;
        this.pageExitFullScreen();
      }else{
        //进入全屏状态。。。
      }
      clearTimeout(this.timer);
      this.timer = null;
    }, 0);
  });
},
methods: {
  //全屏按钮\退出全屏按钮点击事件
  fullScreenClick() {
    this.fullScreen = !this.fullScreen;
    if (this.fullScreen) {//当前要启动全屏
      //this.pageFullScreen();//执行全屏之后的一些操作
      this.windowFullScreen();
    } else {//当前要退出全屏
      //this.pageExitFullScreen();//执行退出全屏之后的一些操作
      this.windowExitFullScreen();
    }
  },
  //启动全屏
  setWindowFullScreen() {
    let docElm = document.documentElement;
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    }else if (docElm.msRequestFullscreen) {
      docElm.msRequestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
      docElm.mozRequestFullScreen();
    }else if (docElm.webkitRequestFullScreen) {
      docElm.webkitRequestFullScreen();
    }
  },
  //退出全屏
  windowExitFullScreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  },
  //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
  checkFull() {
    //火狐浏览器
    let isFull = document.mozFullScreen ||
                    document.fullScreen ||
                    document.webkitIsFullScreen ||
                    document.webkitRequestFullScreen ||
                    document.mozRequestFullScreen ||
                    document.msFullscreenEnabled;
    if (isFull === undefined) isFull = false;
      return isFull;
    },
}