vue判断是否全屏状态

最新推荐文章于 2024-12-21 11:25:03 发布

兮夏-

最新推荐文章于 2024-12-21 11:25:03 发布

阅读量5.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_46693606/article/details/128353020

版权

screenfull.js 全屏监听事件 resize 页面状态

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

17 篇文章

订阅专栏

（1）使用screenfull来解决全屏操作
(2) 利用监听事件，来改变isFullscreen的值，进而控制页面展示“全屏”图标，还是“退出全屏"
1.安装screenfull.js

npm install --save screenfull

2、在相应的组件引入screenful，我的js部分的代码如下：

import screenfull from 'screenfull'

3.使用

  created() {
    // 监听事件
    window.addEventListener('resize', this.onresize)
  },
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener('resize', this.onresize)
  },
  
  methods:{
       // 监听是否全屏状态
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen

      if (isFull === undefined) {
        this.isFullscreen = winFlag
      } else {
        this.isFullscreen = winFlag || isFull
      }
      console.log(winFlag);  // true全屏   false不是全屏
    }
  }