vue3使用screenfull实现全屏 #yyds干货盘点#

理论

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

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

示例

安装screenfull

页面使用

<template>
    <el-button @click="toggleFullscreen">全屏</el-button>
</template>

<script lang="ts">
import screenfull from 'screenfull'

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

    return {
      toggleFullscreen
    }
  }
}
</script>