vue判断是否全屏状态

(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不是全屏
    }
  }

猜你喜欢

转载自blog.csdn.net/m0_46693606/article/details/128353020