vue 全屏展示页面某个模块 并判断是否按了esc键
template部分: <div class="commonInline"> <el-button size="small" @click="handleFullScreen" v-if="!fullscreen">全屏</el-button> <el-button size="small" @click="handleFullScreen" v-else>退出全屏</el-button> </div> <div id="con_lf_top_div">这是要全屏展示的模块</div>
data部分: fullscreen: false
methods部分: checkFull() { //判断浏览器是否处于全屏状态 (需要考虑兼容问题) //火狐浏览器 var isFull = document.mozFullScreen || document.fullScreen || //谷歌浏览器及Webkit内核浏览器 document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled; if (isFull === undefined) { isFull = false; } return isFull; }, // 全屏事件 handleFullScreen() {
// let element = document.documentElement;
let element = document.getElementById("con_lf_top_div"); //设置后就是 id==con_lf_top_div 的容器全屏
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;
this.fullscreen ? element.style.padding = '10px' : element.style.padding = '0px'
},
created部分: let that = this; window.onresize = function () { if (!that.checkFull()) { // 退出全屏后要执行的动作 // console.log("退出全屏"); that.fullscreen = false; let fullElement = document.getElementById("con_lf_top_div"); fullElement.style.padding = '0px'; } };
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步