js vue+elementui 全屏跟退出全屏功能搬砖
html部分代码<span class="user" @click="toggleFullScreen"><el-tooltip class="item" effect="dark" :content="isFullScreen?'退出全屏':'全屏'" placement="bottom">...
·
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 || // W3C
element.webkitRequestFullScreen || // Chrome, safari
element.mozRequestFullScreen || // FireFox
element.msRequestFullscreen // IE11
if (requestMethod) {
requestMethod.call(element)
}
},
exitFullScreen () {
var exitMethod = document.exitFullscreen || // W3C
document.mozCancelFullScreen || // FireFox
document.webkitExitFullscreen || // Chrome等
document.msExitFullscreen // IE11
if (exitMethod) {
exitMethod.call(document)
}
},
addFullScreenListener () {
const self = this
document.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
}
}
break
case 'gecko':
document.onmozfullscreenchange = function () {
if (document.mozFullScreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'trident':
document.onmsfullscreenchange = function () {
if (document.msFullscreenElement) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'others':
document.onfullscreenchange = function () {
if (document.fullscreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
default:
break
}
},
在页面初始化时判断浏览器是否支持全屏操作
// 检查浏览器是否支持全屏
this.canFullScreen = document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
if (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 = null
switch (this.browserKernel) {
case 'webkit':
document.onwebkitfullscreenchange = null
break
case 'gecko':
document.onmozfullscreenchange = null
break
case 'trident':
document.onmsfullscreenchange = null
break
case 'others':
document.onfullscreenchange = null
break
default:
break
}
}
感觉这功能有点鸡肋,哈哈
更多推荐
已为社区贡献16条内容
所有评论(0)