当我们写echarts大屏项目的时候，有时候业务涉及到要进行全屏展示Esc进行退出全屏的操作，以下代码简略展示效果，后续可以根据实际的项目需求进行代码优化和修改
页面未全屏状态
全屏状态
<!-- 不兼容IE -->
<template>
<div
class="screen-full"
@click="handleFullScreen">
{{ isFullscreen ? '退出' : '全屏' }}
<i :class="isFullscreen ? 'el-icon-aim' : 'el-icon-full-screen'"></i>
</div>
11111
</template>
<script>
export default {
data () {
return {
show: false,
isFullscreen: false
}
},
mounted () {
// F11全屏，无法通过按钮退出全屏（因使用事件控制，会报警告，所以去掉）
window.addEventListener('keydown', this.keyDown, true)
// 全屏状态下，无法监听ESC按键事件，监听窗口变化来监听退出全屏
window.addEventListener('resize', () => {
if (!this.checkFull()) {
this.isFullscreen = false
}
}, true)
// 优化： 全屏状态下，无法监听ESC按键事件，通过监听全屏事件来改变全屏状态
void ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach((item) => {
window.addEventListener(item, () => {
console.log('窗口变化', this.checkFull())
this.isFullscreen = this.checkFull()
})
})
},
methods: {
// 按钮事件
handleFullScreen () {
this.isFullscreen ? this.screenfullOut() : this.screenfullEnter()
},
// 键盘事件
keyDown (e) {
const el = e || window.event
// 这样处理，会报警告“Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture”, 这是因为全屏只能从事件触发（用户事件操作），而不能用代码直接触发
if (el.keyCode === 122) {
el.returnValue = false
this.screenfullEnter()
}
},
// 进入全屏
screenfullEnter () {
const el = document.documentElement
const eventEnter =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullScreen
if (typeof eventEnter !== 'undefined' && eventEnter) {
eventEnter.call(el)
this.isFullscreen = true
}
},
// 退出全屏
screenfullOut () {
let eventOut =
document.cancelFullScreen ||
document.webkitCancelFullScreen ||
document.mozCancelFullScreen ||
document.msExitFullScreen
if (typeof eventOut !== 'undefined' && eventOut) {
eventOut.call(document)
this.isFullscreen = false
}
},
// 检测是否全屏
checkFull () {
let isFull =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
if (isFull === undefined) isFull = false
return isFull
}
}
}
</script>
<style lang="scss" scoped>
.screen-full {
position: fixed;
top: 0;
right: 0;
width: 40px;
height: 32px;
line-height: 28px;
text-align: center;
// border: 2px solid rgba(2, 228, 235, 0.65);
// box-shadow: 0 0 1px 6px rgba(2, 228, 235, 0.2);
// border-radius: 5px 0 0 5px;
cursor: pointer;
// transition: all 0.3s;
overflow: hidden;
i {
font-size: 24px;
color: #FFFFFF;
}
// &:hover {
// right: 0px;
// }
}
</style>
