Vue js/ sreenfull全屏预览+退出监听全屏

最新推荐文章于 2025-04-07 11:17:40 发布

阳光下的雨u

最新推荐文章于 2025-04-07 11:17:40 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.youkuaiyun.com/smile2333/article/details/110132853

版权

博客介绍了网页全屏显示和退出全屏的实现方法，包括使用原生JS和screenfull插件。详细说明了screenfull插件的下载、引入和使用，如调用toggle()方法切换全屏、检测全屏状态和判断浏览器支持情况，还提及监听ESC/F11退出全屏的执行位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全屏显示：

一、 js

 <el-button type="primary" size="mini" @click="showFlow()">全屏</el-button>

定义：
fullscreen: false
//全屏
showFlow(){
  let element = document.documentElement;
   if (this.fullscreen) {
    if (document.exitFullscreen) {
     document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
     document.msExitFullscreen();
    }
   } else {
    if (element.requestFullscreen) {
     element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
     element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
     element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
     // IE11
     e