screenfull（vue全屏）

最新推荐文章于 2024-02-20 09:20:48 发布

积硅步以至千里

最新推荐文章于 2024-02-20 09:20:48 发布

阅读量330

点赞数 6

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_46965237/article/details/134008429

版权

问题：首页有一个进入”数据大屏“页面的按钮，进入直接以大屏显示。”数据大屏“页面（没有退出/进入全屏的按钮，只能键盘F11和ESC退出全屏）。

安装插件：npm i screenfull@5.1.0 （这里指定了版本）

引入：import screenfull from 'screenfull'

首页进入数据大屏：

click() {
      if (!screenfull.isEnabled) {
        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
        return false
      }
      this.$router.push('/screen')
      screenfull.request(); // 直接请求进入全屏模式
    },

以下代码均是写在”数据大屏“页面：

mounted() {
  window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件
},
beforeDestroy() {
  window.removeEventListener("keydown", this.KeyDown, true);
},
//以下是 method 中的方法
KeyDown(event) {
  console.log('执行了键盘事件');
  if (event.keyCode === 122 || event.keyCode === "Escape") {
     //禁用f11 和 ESC 键盘本身的事件
     event.returnValue = false;
     //触发全屏的按钮
     this.screenfull();
   }
},
screenfull() {
   console.log("屏幕变化");
},

进入了”数据大屏页面“之后，按下了F11，浏览器依然执行的是键盘的默认事件（退出全屏），console.log('执行了键盘事件');语句并没有执行。过了一会之后，按下键盘F11或者ESC,这时候才会执行我写的自定义事件（请教下大神解答）。

控制台输出：

解决方法：

将事件绑定在引入的插件 screenfull 上，

mounted() {
  // isEnabled 判断浏览器是否能支持全屏 API
  if (screenfull.isEnabled) {
    screenfull.on("change", this.handleScreenChange);
  }
},
beforeDestroy() {
  if (screenfull.isEnabled) {
    screenfull.off("change", this.handleScreenChange);
  }
},
methods: {
  handleScreenChange() {
    //isFullscreen 监听浏览器是否处在全屏状态
    if (screenfull.isFullscreen) {
      // console.log("进入全屏");
      // 执行进入全屏后的逻辑
    } else {
      // console.log("退出全屏"); 这里跳回首页
      this.$router.push("/index");
    }
  },
}

附上screenfull的几个自带的属性/函数（我使用的）

screenfull.isEnabled 布尔值，是否允许你进入全屏

screenfull.isFullscreen 判断当前是否是全屏

screenfull.toggle() 切换全屏函数（处在全屏则退出，否则进入全屏）

screenfull.request() 直接进入全屏状态的函数