1、全屏插件 screenfull.js

全屏插件 screenfull.js，npm 地址：https://www.npmjs.com/package/screenfull

1.安装组件

npm install screenfull@5.1.0 --save

注意：如果你使用的是vue2，则使用5.1.0，因为默认安装 版本是 6.0，在vue2环境下会报错

2.在需要引入的组件中引入

import screenfull from 'screenfull'

3.在 Vue 中使用

<template>
	<div class="fullBtn">
		<span @click="screenfull">{{ isFullscreen ? '退出': '全屏' }}</span>
	</div>
</template>

<script>
// 引入screenfull
import screenfull from 'screenfull'

export default {
  data () {
    return {
      // 默认不全屏
      isFullscreen: false,
    }
   }，
   mounted() {
    let that = this;
    screenfull.on("change", () => {
      if (!screenfull.isFullscreen) {
        that.isFullscreen = false;
      } else {
        that.isFullscreen = true;
      }
    })
  },
   methods () {
     screenfull() {
      if (!screenfull.isEnabled) {
        this.$message({ message: '您的浏览器不支持全屏', type: "warning" })
        return false;
      }
      this.isFullscreen = !this.isFullscreen;
       // 调用 screenfull.toggle() 可以双向切换全屏与非全屏(map_container 需要全屏的元素)
      screenfull.toggle(document.getElementById('map_container'));
    },
  }
}
</script>

4.screenfull的API

• request(ele) 全屏
• exit() 退出全屏
• toggle() 切换全屏
• on(event, function) ：event为 ‘change’ | ‘error’ 注册事件
• off(event, function) ： 移除前面已经注册的事件
• element： 返回一个全屏的dom节点，如果没有就为 null
• isFullscreen : 是否是全屏状态
• isEnabled ：判断是否支持全屏

2、js控制浏览器全屏

参考： js控制浏览器全屏踩坑记录

• document.fullscreenElement ：只读属性 Document.fullscreenElement 返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。
• document.fullscreenEnabled： Document 接口上的只读属性 fullscreenEnabled 表明全屏模式是否可用。
  • 全屏模式仅适用于不包含任何窗口化插件的页面，或者页面中的所有 <iframe> 元素都设置了 allowfullscreen 属性。
  • iframe嵌套其它网站页面 全屏设置
  • 一个布尔值，如果调用 Element.requestFullscreen() 能进入全屏模式，则为 true。如果全屏模式不可用，则该值为
    false。

function requestFullscreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullscreen();
  } else {
    console.log("你的浏览器现在无法使用全屏模式");
  }
}

<div class="fullscreen_btn" @click="changeFullScreen">
   {{ isFullScreen ? "退出" : "全屏" }}
</div>

<script>
export default {
 
  data() {
    return {
      // 是否全屏
      isFullScreen: document.fullscreenElement,
    };
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown, true); // 监听按键事件
    window.addEventListener("resize", this.changeIsFullScreen);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.keyDown);
    window.removeEventListener("resize", this.changeIsFullScreen);
  },
  methods: {
    changeIsFullScreen() {
      this.isFullScreen = document.fullscreenElement;
    },
    keyDown(event) {
      event = event || window.event;
      // console.log(event.keyCode);
      if (event.keyCode === 122) {
        // 禁用f11
        event.returnValue = false;
        this.changeFullScreen();
      }
    },
    changeFullScreen() {
      if (document.fullscreenElement) {
        if (document.exitFullScreen) {
          document.exitFullscreen();
        }
        // 兼容火狐
        if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        }
        // 兼容谷歌等
        if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        // 兼容IE
        if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (document.documentElement.RequestFullScreen) {
          document.documentElement.RequestFullScreen();
        }
        // 兼容火狐
        if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        }
        // 兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
        if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen();
        }
        // 兼容IE,只能写msRequestFullscreen
        if (document.documentElement.msRequestFullscreen) {
          document.documentElement.msRequestFullscreen();
        }
      }
    },
  },
};
</script>