<template>
|
<div>
|
<!-- <HeaderBox /> -->
|
<div class="home_box">
|
<!-- <LeftBox />
|
<CenterBox />
|
<RightBox /> -->
|
</div>
|
<!-- <div class="fullscreen-btn" @click="toggleFullScreen">
|
<i :class="isFullScreen ? 'exit-fullscreen-icon' : 'fullscreen-icon'"></i>
|
</div>
|
<div v-if="!isFullScreen && showOverlay" class="fullscreen-overlay" @click="toggleFullScreen">
|
<div class="overlay-content">
|
<p>点击此处或按F11键进入全屏模式</p>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
// import HeaderBox from '../header/index.vue'
|
// import LeftBox from '../left/index.vue'
|
// import CenterBox from '../center/index.vue'
|
// import RightBox from '../right/index.vue'
|
export default {
|
components: {
|
// HeaderBox,
|
// LeftBox,
|
// CenterBox,
|
// RightBox
|
},
|
data() {
|
return {
|
isFullScreen: true,
|
showOverlay: true,
|
}
|
},
|
watch: {
|
},
|
created() {
|
// 监听全屏变化事件
|
// document.addEventListener('fullscreenchange', this.fullscreenChangeHandler)
|
// document.addEventListener('webkitfullscreenchange', this.fullscreenChangeHandler)
|
// document.addEventListener('mozfullscreenchange', this.fullscreenChangeHandler)
|
// document.addEventListener('MSFullscreenChange', this.fullscreenChangeHandler)
|
|
// // 监听键盘事件
|
// window.addEventListener('keydown', this.handleKeyDown)
|
},
|
mounted() {
|
// 检查当前是否为全屏状态
|
this.checkFullScreenStatus()
|
},
|
beforeDestroy() {
|
|
// // 移除事件监听器
|
// document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler)
|
// document.removeEventListener('webkitfullscreenchange', this.fullscreenChangeHandler)
|
// document.removeEventListener('mozfullscreenchange', this.fullscreenChangeHandler)
|
// document.removeEventListener('MSFullscreenChange', this.fullscreenChangeHandler)
|
|
// window.removeEventListener('keydown', this.handleKeyDown)
|
},
|
methods: {
|
toggleFullScreen() {
|
if (!this.isFullScreen) {
|
// 进入全屏
|
const element = document.documentElement
|
if (element.requestFullscreen) {
|
element.requestFullscreen()
|
} else if (element.webkitRequestFullscreen) {
|
element.webkitRequestFullscreen()
|
} else if (element.mozRequestFullScreen) {
|
element.mozRequestFullScreen()
|
} else if (element.msRequestFullscreen) {
|
element.msRequestFullscreen()
|
}
|
} else {
|
// 退出全屏
|
if (document.exitFullscreen) {
|
document.exitFullscreen()
|
} else if (document.webkitExitFullscreen) {
|
document.webkitExitFullscreen()
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen()
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen()
|
}
|
}
|
},
|
fullscreenChangeHandler() {
|
this.checkFullScreenStatus()
|
},
|
checkFullScreenStatus() {
|
this.isFullScreen = !!(
|
document.fullscreenElement ||
|
document.webkitFullscreenElement ||
|
document.mozFullScreenElement ||
|
document.msFullscreenElement
|
)
|
},
|
handleKeyDown(event) {
|
// 监听F11键
|
if (event.key === 'F11') {
|
event.preventDefault()
|
this.toggleFullScreen()
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home_box {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.fullscreen-btn {
|
position: fixed;
|
right: 20px;
|
bottom: 20px;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background-color: rgba(0, 0, 0, 0.5);
|
color: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
z-index: 999;
|
transition: all 0.3s;
|
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.8);
|
}
|
|
i {
|
font-size: 20px;
|
}
|
|
.fullscreen-icon::before {
|
content: "\2922";
|
/* 使用Unicode字符作为全屏图标 */
|
}
|
|
.exit-fullscreen-icon::before {
|
content: "\2923";
|
/* 使用Unicode字符作为退出全屏图标 */
|
}
|
}
|
|
.fullscreen-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.7);
|
z-index: 1000;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.overlay-content {
|
background-color: white;
|
padding: 20px 40px;
|
border-radius: 8px;
|
text-align: center;
|
cursor: pointer;
|
|
p {
|
font-size: 18px;
|
margin: 0;
|
}
|
}
|
}
|
</style>
|
