实现vue大数据全屏和退出全屏操作

一、封装设置全屏和退出全屏的函数：

1. 设置全屏

setFullScreen() {
            let el = document.documentElement;
            let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
            if (rfs) { // typeof rfs != "undefined" && rfs
                rfs.call(el)
            } else if (typeof window.ActiveXObject !== 'undefined') {
				// for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
                let wscript = new ActiveXObject('WScript.Shell');  //eslint-disable-line
                if (wscript != null) {
                    wscript.SendKeys('{F11}')
                }
            }
            
        },

el.requestFullscreen() // chrome,firefox,edge for true
el.webkitRequestFullScreen() // chrome,edge for true
el.mozRequestFullScreen() // firefox for true
el.msRequestFullscreen() // ie11 for true

2. 退出全屏

exitFullScreen() {
            let el = document;
            let cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen;
            if (cfs) { // typeof cfs != "undefined" && cfs
                cfs.call(el);
            } else if (typeof window.ActiveXObject !== 'undefined') {
                // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
                let wscript = new ActiveXObject('WScript.Shell'); //eslint-disable-line
                if (wscript != null) {
                    wscript.SendKeys('{F11}')
                    
                }
            }
        },

3。判断当前页面全屏状态

isFullScreen() {
    return  !! (
        document.fullscreen || 
        document.mozFullScreen ||                         
        document.webkitIsFullScreen ||       
        document.webkitFullScreen || 
        document.msFullScreen 
    );
}

注意:该方法只能判断手动调用全屏和退出全屏的api，按f11键进入的全屏状态是false

二、给全屏按钮设置点击事件

	fullScreenHandle() {
            var isFull = isFullScreen()
			if(isFull) {
				this.exitFullScreen()
			}else {
				this.setFullScreen()
			}
        },

注意：按f11进入的全屏不能使用退出一中的退出全屏的方法，所以要监听用户按下f11的键盘事件并手动调用进入全屏的方法。

• 监听全局的键盘事件

 window.addEventListener('keydown',(e)=> {
            var isFull = isFullScreen()
            e = e || window.event
              if(e.keyCode == 122 && !isFull) {
                  e.preventDefault()
                  this.setFullScreen()
              }
        })