Vue judges whether it is full screen

(1) Use screenfull to solve full-screen operation
(2) Use monitoring events to change the value of isFullscreen, and then control the page to display the "full screen" icon or "exit full screen"
1. Install screenfull.js

npm install --save screenfull

2. Introduce screenful in the corresponding component, the code of my js part is as follows:

import screenfull from 'screenfull'

3. use

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