vue的全屏组件

项目中有一个驾驶舱页面， 需要用到全屏的显示， 那么我们是怎么做全屏的切换呢
有两个方法， 一个就是 使用 F11 键就可以切换全屏
第二个方法就是使用 requestFullscreen 方法
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

看一下 全屏的 api
element.requestFullScreen()
这里的 element 是指的任何元素节点， 可以是 document.body 也可以是一个 （div）,document.getElementById("#div");
document.fullscreenEnabled: 标记 fullscreen 当前是否可用.

浏览器的内核大至如图

下面是 全屏组件的代码， 可以完整复制， 引入到要使用的文件中即可

<template>
  <div class="fullscreen" @click="toggleFullScreen">
  	<!-- 这是一个全屏的小图标 -->
    <i :class="isFullScreen ? 'el-icon-aim':'el-icon-rank'"
       style="width: 1.4rem;height: 1.4rem;vertical-align:middle;margin-right: .6rem;font-size:1.4rem"></i>
  </div>

</template>

<script>

export default {
  name: 'fullscreen',
  data() {
    return {
      isFullScreen: false         //这里记录了是否全屏的状态
    }
  },
  created() {
  	//当组件加载的时候 判断一下当前用户的浏览器是否可以支持全屏功能。
  	//同时使用了一个变量  browserKernel 来记录当前的浏览器是什么内核的
    this.canFullScreen = document.fullscreenEnabled ||
      document.webkitFullscreenEnabled ||
      document.mozFullScreenEnabled ||
      document.msFullscreenEnabled
    if (document.webkitFullscreenEnabled) {
      this.browserKernel = 'webkit'
    } else if (document.mozFullScreenEnabled) {
      this.browserKernel = 'gecko'
    } else if (document.msFullscreenEnabled) {
      this.browserKernel = 'trident'
    } else if (document.fullscreenEnabled) {
      this.browserKernel = 'others'
    }
    if (this.canFullScreen) {
      this.addFullScreenListener()    //这个方法只是一个vue 的method ， 不要把它看成是 dom对象的 addListener 方法了
    }
  },

  destroyed(){
    document.onkeydown = null
    switch (this.browserKernel) {
      case 'webkit':
        document.onwebkitfullscreenchange = null
        break
      case 'gecko':
        document.onmozfullscreenchange = null
        break
      case 'trident':
        document.onmsfullscreenchange = null
        break
      case 'others':
        document.onfullscreenchange = null
        break
      default:
        break
    }
  },

  methods: {
    toggleFullScreen () {
      if (this.canFullScreen) {
        if (this.isFullScreen) {
          // 关闭全屏
          this.exitFullScreen()
          this.isFullScreen = false
        } else {
          // 打开全屏
          this.requestFullScreen(document.body)
          this.isFullScreen = true
        }
      } else {
        this.$message.warning({
          content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
          duration: 3
        })
      }
    },
    requestFullScreen (element) {
      // 判断各种浏览器，找到正确的方法
      const requestMethod = element.requestFullScreen || // W3C
        element.webkitRequestFullScreen || // Chrome, safari
        element.mozRequestFullScreen || // FireFox
        element.msRequestFullscreen // IE11
      if (requestMethod) {
        requestMethod.call(element)
      }
    },
    exitFullScreen () {
      var exitMethod = document.exitFullscreen || // W3C
        document.mozCancelFullScreen || // FireFox
        document.webkitExitFullscreen || // Chrome等
        document.msExitFullscreen // IE11
      if (exitMethod) {
        exitMethod.call(document)
      }
    },
    addFullScreenListener () {
      const self = this
      document.onkeydown = function (e) {
        if (e && e.keyCode === 122) { // 捕捉F11键盘动作
          e.preventDefault() // 阻止F11默认动作
          self.toggleFullScreen()   //使用自已定义的方法来设全屏， 阻止 F11的默认动作，是为了不让程序中记录状态的变量出乱子， 所以阻止了默认的动作
        }
      }
      // 监听不同浏览器的全屏事件，并件执行相应的代码
      //这里为 screenchange 的事件， 绑定了监听函数 
      switch (self.browserKernel) {
        case 'webkit':
          document.onwebkitfullscreenchange = function () {
            if (document.webkitIsFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'gecko':
          document.onmozfullscreenchange = function () {
            if (document.mozFullScreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'trident':
          document.onmsfullscreenchange = function () {
            if (document.msFullscreenElement) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        case 'others':
          document.onfullscreenchange = function () {
          //这里的 document.fullscreen 返回的是一个 布尔值， 是说当前是否处于全屏状态， 但已经过时了，
          //官网推荐我们使用   当前fullscreenElement属性来确定相同的事情   
          //               document.fullscreenElement !== null;
          //  如果fullscreenElement不是null，则返回true，表示全屏模式有效
            if (document.fullscreen) {
              self.isFullScreen = true
            } else {
              self.isFullScreen = false
            }
          }
          break
        default:
          break
      }
    },

  }
}
</script>

<style scoped lang="scss">
.fullscreen {
  display: inline-block;
}
</style>

使用上面的组件

这样就可以在项目中使用全屏的组件了

参考浏览器全屏实现方式
文档全屏