js vue+elementui 全屏跟退出全屏功能搬砖

html部分代码

<span class="user" @click="toggleFullScreen"><el-tooltip class="item" effect="dark" :content="isFullScreen?'退出全屏':'全屏'" placement="bottom"><i :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'" style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i></el-tooltip></span>

data()定义部分

browserKernel: '',canFullScreen: false,isFullScreen: false,

方法部分

//全屏设置toggleFullScreen () {if (this.canFullScreen) {if (this.isFullScreen) {// 关闭全屏this.exitFullScreen()this.isFullScreen = false} else {// 打开全屏this.requestFullScreen(document.body)this.isFullScreen = true}} else {this.$message.warning({content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',duration: 3})}},requestFullScreen (element) {// 判断各种浏览器，找到正确的方法const requestMethod = element.requestFullScreen || // W3Celement.webkitRequestFullScreen || // Chrome, safarielement.mozRequestFullScreen || // FireFoxelement.msRequestFullscreen // IE11if (requestMethod) {requestMethod.call(element)}},exitFullScreen () {var exitMethod = document.exitFullscreen || // W3Cdocument.mozCancelFullScreen || // FireFoxdocument.webkitExitFullscreen || // Chrome等document.msExitFullscreen // IE11if (exitMethod) {exitMethod.call(document)}},addFullScreenListener () {const self = thisdocument.onkeydown = function (e) {if (e && e.keyCode === 122) { // 捕捉F11键盘动作e.preventDefault() // 阻止F11默认动作self.toggleFullScreen()}}// 监听不同浏览器的全屏事件，并件执行相应的代码switch (self.browserKernel) {case 'webkit':document.onwebkitfullscreenchange = function () {if (document.webkitIsFullScreen) {self.isFullScreen = true} else {self.isFullScreen = false}}breakcase 'gecko':document.onmozfullscreenchange = function () {if (document.mozFullScreen) {self.isFullScreen = true} else {self.isFullScreen = false}}breakcase 'trident':document.onmsfullscreenchange = function () {if (document.msFullscreenElement) {self.isFullScreen = true} else {self.isFullScreen = false}}breakcase 'others':document.onfullscreenchange = function () {if (document.fullscreen) {self.isFullScreen = true} else {self.isFullScreen = false}}breakdefault:break}},

在页面初始化时判断浏览器是否支持全屏操作

// 检查浏览器是否支持全屏this.canFullScreen = document.fullscreenEnabled ||document.webkitFullscreenEnabled ||document.mozFullScreenEnabled ||document.msFullscreenEnabledif (document.webkitFullscreenEnabled) {this.browserKernel = 'webkit'} else if (document.mozFullScreenEnabled) {this.browserKernel = 'gecko'} else if (document.msFullscreenEnabled) {this.browserKernel = 'trident'} else if (document.fullscreenEnabled) {this.browserKernel = 'others'}if (this.canFullScreen) {this.addFullScreenListener()}

最后在销毁页面时移除监听

destroyed(){document.onkeydown = nullswitch (this.browserKernel) {case 'webkit':document.onwebkitfullscreenchange = nullbreakcase 'gecko':document.onmozfullscreenchange = nullbreakcase 'trident':document.onmsfullscreenchange = nullbreakcase 'others':document.onfullscreenchange = nullbreakdefault:break}}

感觉这功能有点鸡肋，哈哈

js vue+elementui 全屏跟退出全屏功能搬砖相关推荐

vue实现页面全屏和退出全屏
pc端使用vue实现页面全屏和退出全屏 element.requestFullScreen() -- 全屏显示 Element.requestFullscreen()方法用于异步请求使得Elemen ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
JS实现全屏和退出全屏
JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...
python退出全屏_实现网页全屏和退出全屏JS代码，多浏览器兼容
js全屏和退出全屏代码|www.125jz.com 全屏显示退出全屏 function requestFullScreen(element) { // 判断各种浏览器,找到正确的方法 var req ...
js 控制浏览器实现全屏和退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...
HTML JS全屏和退出全屏
HTML JS全屏和退出全屏全屏方法退出全屏方法调用代码判断全屏错误的做法错误分析正确的做法全屏方法 function launchIntoFullscreen(element) {i ...
退出全屏html,js全屏和退出全屏代码范例
js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复制下面的源码另存为ht ...
linux控制台则怎么退出全屏,JS 全屏和退出全屏详解及实例代码
JS 全屏和退出全屏 js实现浏览器窗口全屏和退出全屏的功能,市面上主流浏览器如:谷歌.火狐.360等都是兼容的,不过IE低版本有点瑕疵(全屏状态下仍有底部的状态栏). 这个demo基本是够了,直接复 ...

js vue+elementui 全屏跟退出全屏功能搬砖

js vue+elementui 全屏跟退出全屏功能搬砖相关推荐

最新文章

热门文章