使用方法

• 首先安装 npm install screenfull --save
• 在使用.vue文件中 引入 import screenfull from 'screenfull'
• 在按钮方法中调用 screenfull.toggle()
• 还可以检测全屏状态 screenfull.isFullscreen
• 测试浏览器是否支持全screenfull screenfull.isEnabled

API

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

<template>
  <button @click="toggleFullScreen">全屏切换</button>
</template>
 
<script>
import screenfull from 'screenfull';
 
export default {
  methods: {
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        alert('您的浏览器不支持全屏功能');
      }
    }
  }
}
</script>

兼容性

注意：为了在Internet Explorer中使用此软件包，您需要一个Promise polyfill。

注意：Safari在台式机和iPad上受支持，但在iPhone上不受支持。这是浏览器中的限制，而不是Screenfull中的限制。

JS实现全屏的方法合集_js 全屏-CSDN博客文章浏览阅读2.6k次，点赞5次，收藏6次。【代码】JS实现全屏的方法合集。_js 全屏https://blog.csdn.net/qq_37860634/article/details/130921224