vue3使用screenfull实现全屏

理论

npm地址：https://www.npmjs.com/package/screenfull

使用方法

1. 安装 npm install screenfull --save
2. 在使用.vue文件中 引入 import screenfull from ‘screenfull’
3. 在按钮方法中调用方法可以双向切换全屏与非全屏 screenfull.toggle()

还可以

• 检测全屏状态 screenfull.isFullscreen
• 测试浏览器是否支持全screenfull screenfull.isEnabled

API

screenfull 插件常用方法：

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

示例 安装screenfull

cnpm install --save screenfull

页面使用

    全屏



import screenfull from 'screenfull'

export default {
  name: 'Home',
  setup() {
    function toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }

    return {
      toggleFullscreen
    }
  }
}