项目中有一个驾驶舱页面， 需要用到全屏的显示， 那么我们是怎么做全屏的切换呢
有两个方法， 一个就是 使用 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>
</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>
使用上面的组件
 

 这样就可以在项目中使用全屏的组件了
 
参考浏览器全屏实现方式
 文档全屏
                    项目中有一个驾驶舱页面， 需要用到全屏的显示， 那么我们是怎么做全屏的切换呢有两个方法， 一个就是 使用 F11 键就可以切换全屏第二个方法就是使用 requestFullscreen 方法1.document下没有requestFullscreen2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发3.页面跳转需先退出全屏4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效解决方案：使用 :full-screen伪类 为元素添加全屏时的
支持的浏览器
注意：为了在 Internet Explorer 中使用这个包，你需要一个 Promise polyfill。
 注意：桌面和 iPad 支持 Safari，但 iPhone 不支持。
 注意：导航到另一个页面、更改选项卡或使用任何应用程序切换器（或 Alt-Tab）切换到另一个应用程序同样会退出全屏模式。
 从 <= 2.3.5 迁移
一般情况下，可以简单地使用双向绑定切换全屏状态，因此不必直接调用组件方法。
 移除了background道具，可以直接在组件上设置
 应用程序接口
与它相关的wrapper和选项（例如background被删除，它的用例有限，不是非常可定制的，您可以简单地自己实现它。
 方法名称更改如下：
		:class="isFullscreen ? 'ilink-icon-tuichuquanping' : 'ilink-icon-quanping'" 
		@click="handleClick">
	</span>
</template&gt.
				
vue-fullscreen用于全屏Live演示的简单Vue.js组件快速示例用法与v-for结合使用modal的中文文档浏览器支持全屏API vue-fullscreen用于v-for的全屏Live演示简单示例Vue.js简短示例与v-for结合的用法模态中文文档浏览器的用法支持全屏API安装通过NPM从GitHub安装npm install vue-fullscreen用法要使用vue-fullscreen，只需将其导入，然后调用Vue.use（）进行安装。
function fullScreen(){
   var el = document.documentElement;
   var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
 el.mozRequestFullScreen || el.msRequestFullscreen;     //兼...