vue2实现全屏切换

1.安装插件

npm install screenfull --save

2.页面引入

// 全屏组件
import screenfull from 'screenfull'

3.绑定事件使用

4.全屏点击事件

 // 全屏
    buttoncli() {
    
      screenfull.toggle()
    
      this.checkFull()
    
    },
    
    // 监控屏幕变化
    
    checkFull() {
    
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    
      // 是否全屏判断
    
      this.isFullscreen = !this.isFullscreen;
    
      if (this.isFullscreen) {
    
        this.$message({
    
          message: '全屏啦',
    
          type: 'success'
    
        })
    
      } else {
    
        this.$message({
    
          message: '取消全屏',
    
          type: 'warning'
    
        })
    
      }
    
      if (isFull === undefined) {
    
        isFull = false;
    
      }
    
      return isFull;
    
    },