Vue js/ sreenfull全屏预览+退出监听全屏

全屏显示：

一、 js

 <el-button type="primary" size="mini" @click="showFlow()">全屏</el-button>

定义：
fullscreen: false
//全屏
showFlow(){
  let element = document.documentElement;
   if (this.fullscreen) {
    if (document.exitFullscreen) {
     document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
     document.msExitFullscreen();
    }
   } else {
    if (element.requestFullscreen) {
     element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
     element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
     element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
     // IE11
     element.msRequestFullscreen();
    }
   }
   this.fullscreen = !this.fullscreen;
}

二、sreenfull插件：

• 下载插件：cnpm / npm install --save screenfull
• 谁用谁引入： import screenfull from ‘screenfull’
• 在按钮方法中调用 ： screenfull.toggle()
• 检测全屏状态： screenfull.isFullscreen
• 判断浏览器是否支持全屏状态： screenfull.isEnabled

使用

// 全屏
 showFlow() {
    if (!screenfull.isEnabled) {
    this.$message({
     message: '不支持全屏',
     type: 'warning'
    })
    return false
   }
   screenfull.toggle()
  }

退出全屏 ：

 <el-button type="text" icon="el-icon-arrow-left" style="color: #fff" @click="clearBackAll">返回</el-button>

一、 js

// 取消全屏
clearBackAll() {
 var el = document
      var cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen
      // typeof cfs != 'undefined' && cfs
      if (cfs) {
        cfs.call(el)
        } else if (typeof window.ActiveXObject !== 'undefined') {
        // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
}

二、sreenfull插件：

// 取消全屏
clearBackAll() { 
 if (screenfull.isFullscreen) {
        screenfull.exit()
  }
}

监听ESC/F11退出全屏 ：

定义个方法在 methods: {}：

 //全屏判断状态 取消
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },

created(){} 中执行

created() {
    let that = this
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
         that.fullscreen = false
        that.backGo()
      }
    }
  },