vue中对监听esc事件和退出全屏问题的解决方案_vue.js_

mounted() {          let that = this     window.addEventListener('resize', function () {        if (!that.isFullScreen()) {          // 非全屏状态          //业务逻辑                         }     }); }

methods: { //全屏 fullele() { return ( document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || null ); }, //判断是否全屏 isFullScreen() { return !!(document.webkitIsFullScreen || this.fullele()); }, //退出全屏 exitFullscreen() { this.fullScreenFlag = false; if (document.exitFullScreen) { document.exitFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }, //全屏 full(ele) { if (ele.requestFullscreen) { ele.requestFullscreen(); } else if (ele.mozRequestFullScreen) { ele.mozRequestFullScreen(); } else if (ele.webkitRequestFullscreen) { ele.webkitRequestFullscreen(); } else if (ele.msRequestFullscreen) { ele.msRequestFullscreen(); } }, //切换是否全屏 全屏按钮要执行的方法 toggleFullScreen() { if (this.isFullScreen()) { this.exitFullscreen(); } else { this.fullScreenFlag = true; this.full(document.getElementById("dataMointor")); //要设置全屏的元素 } } }

 /** * 浏览器全屏 * @param {HTMLElement} [el=document] 全屏元素 */ export function fullScreen(el) { el = el || document.documentElement; const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen; if (typeof rfs !== 'undefined' && rfs) { rfs.call(el); } } /** * 退出全屏 */ export function exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } /** * 浏览器当前是否全屏 * @return {*|boolean} */ export function isFullScreen() { return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen } 

function toggle(ele, that, exitFullScreen, fullScreen) { if (that.isFullScreen) { exitFullScreen() that.isFullScreen = false } else { fullScreen(document.getElementById(ele)) that.isFullScreen = true } } export default { testVueThis, toggle }