理论

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

页面使用

<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>

今天的文章vue3使用screenfull实现全屏分享到此就结束了，感谢您的阅读。