vue3使用screenfull插件实现全屏效果

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

使用方法

安装

npm install screenfull --save

在使用.vue文件中 引入

import screenfull from "screenfull"

在按钮方法中调用方法可以双向切换全屏与非全屏

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 ： 判断是否支持全屏

页面里面具体使用

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