通过单击按钮实现全屏、退出全屏

没什么好说的，看代码
HTML

<el-button size="mini" type="success" @click="intScreen">全屏显示</el-button>
<el-button size="mini" type="success" @click="outScreen">退出全屏</el-button>

    // 全屏intScreen() {var docElm = document.documentElement;if (docElm.requestFullscreen) {  //W3CdocElm.requestFullscreen();} else if (docElm.mozRequestFullScreen) {   //FireFoxdocElm.mozRequestFullScreen();} else if (docElm.webkitRequestFullScreen) {  //Chrome等docElm.webkitRequestFullScreen();} else if (elem.msRequestFullscreen) {  //IE11elem.msRequestFullscreen();}},// 退出全屏outScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}},

或者监听屏幕变化的大小进行相应的操作
例如:我这里兼容了两种分辨率下的屏幕.按f11就影藏侧边栏和标题等等

    window.addEventListener('resize', ()=> {var height = document.documentElement.clientHeight;var width = document.documentElement.clientWidth;if((height >= 1079 && width == 1920) || (height >= 1049 && width == 1680)){this.main = true;this.aside = false;}else{this.main = false;this.aside = true;}})

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~

通过单击按钮实现全屏、退出全屏相关推荐

html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更
全屏和退出全屏引用了layui里面的icon标签,也可以使用自己的图片,都可以. html: <div id="screenDiv"><!-- 以下是layui里 ...
esc键退出全屏 vue_vue项目实现全屏,退出全屏，图标切换的解决方案
vue项目实现全屏,退出全屏,图标切换的解决方案 vue项目点击按钮实现全屏很容易,点击按钮退出全屏也很容易. fullScreen(){ var element=document.documentE ...
vue自写全屏/退出全屏组件
页面代码 isFullscreen主要是判断当前是否为全屏状态,然后展示不同的文字和svg图标组件传入的值为当前需要全屏的模块div的id名 vue data中定义是否全屏的值,默认为false i ...
js 全屏退出全屏
直接上代码: 全屏 function fullScreen() {var el = document.documentElement;var rfs = el.requestFullScreen || ...
【Vue实用功能】Vue实现浏览器全屏退出全屏
Vue实现浏览器全屏 vue代码 <v-btn class="ml-2" @click="fullScreen" v-show="!is_sma ...
浏览器切换全屏|退出全屏
一.进入全屏浏览器无法自启动以后立即触发进入全屏 function requestFullScreen() {var de = document.documentElement;if (de.re ...
three.js全屏退出全屏
window.addEventListener("dblclick", () => {const fullScreenElement = document.fullscree ...
View UI——页面右上角添加浮动按钮（设置、退出全屏、进入全屏）
tabindex 用法说明实现以下功能:(用的是View UI组件库) 先创建一个存放浮动按钮的<div> <div class="right_top" v-i ...
Putty全屏/退出全屏快捷键
转载于:https://www.cnblogs.com/sos-blue/p/5287571.html
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...

通过单击按钮实现全屏、退出全屏

通过单击按钮实现全屏、退出全屏相关推荐

最新文章

热门文章