vue插件实现全屏效果screenfull（包含全屏，退出全屏的切换，绑定F11和Esc按键切换）

风铃又响了

已于 2023-12-05 16:10:23 修改

阅读量2.9k

点赞数 10

文章标签： vue.js 前端 javascript

于 2023-12-05 15:15:41 首次发布

本文链接：https://blog.csdn.net/zhj1329000/article/details/134807874

版权

本文介绍了如何在Vue项目中安装和使用screenfull插件实现网页全屏功能，包括引入插件、判断浏览器支持、监听全屏事件以及处理F11和Esc键的联动操作。

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

1.安装插件

npm install screenfull --save

2.在你要使用的页面，引入

import screenfull from "screenfull";

注意：如果运行报错，需要降低screenfull的插件版本，比如直接下载指定版本：

npm install --save-dev screenfull@5.1.0

3.区分插件的属性值去判断浏览器是否全屏：

//属性值
screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏

//事件效果
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

4.引用到你的代码中去（示例）（同时绑定F11和Esc按键全屏的联动效果，使切换同步）：

 //html部分：
 <button  @click="fullScreenFun">{{screenfullName}}</button>

 //js部分

 //定义属性值：
 return {
   screenfullName: "全屏",
 }

 //切换全屏逻辑：
 mounted() {
    //全屏之后，无法监听到键盘按键的点击事件，所以只能监听窗口的变化进行判断
    window.onresize = () => {
      if (!screenfull.isFullscreen) {
        this.screenfullName = "全屏";//判断退出全屏，进行赋值
      }
    };
    this.screenFull(); //监听Esc按键
 }
 methods: {
    screenFull() {
      //监听F11事件
      window.addEventListener("keydown", this.KeyDown, true);
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变 
      化,isScreenFull
      document.addEventListener("fullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen; //你要切换得图标使用得属性
      });
      document.addEventListener("mozfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("msfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
    },
    KeyDown(event) {
      //F11按键触发全屏事件
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.fullScreenFun(); //调用触发全屏的方法
      }
    },
    fullScreenFun() {
      // 如果不允许进入全屏，发出不允许提示
      if (!screenfull.isEnabled) {
        alert("您的浏览器不能全屏");
        return false;
      }
      //判断是否为全屏状态
      if (!screenfull.isFullscreen) {
        this.screenfullName = "退出全屏";
      } else {
        this.screenfullName = "全屏";
      }
      //执行切换事件
      screenfull.toggle();
    },
  }