94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<template>
|
||
<!-- 给大屏组件套一个容器，并通过ref获取该容器 -->
|
||
<div ref="fullscreenContainer" class="fullscreen-container">
|
||
<Home></Home>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Home from '@/modules/dashboardBig/views/index.vue'
|
||
|
||
export default {
|
||
components: { Home },
|
||
mounted() {
|
||
// 确保容器DOM已渲染后，对容器执行全屏
|
||
this.$nextTick(() => {
|
||
this.enterFullscreen()
|
||
this.addFullscreenListener()
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
// 移除监听，避免内存泄漏
|
||
this.removeFullscreenListener()
|
||
// 组件销毁时如果仍在全屏状态，退出全屏
|
||
this.exitFullscreen()
|
||
},
|
||
methods: {
|
||
// 进入全屏（针对目标容器）
|
||
enterFullscreen() {
|
||
// 获取大屏组件的容器元素
|
||
const container = this.$refs.fullscreenContainer
|
||
if (!container) return
|
||
|
||
// 对容器执行全屏（兼容各浏览器）
|
||
if (container.requestFullscreen) {
|
||
container.requestFullscreen()
|
||
} else if (container.mozRequestFullScreen) { // Firefox
|
||
container.mozRequestFullScreen()
|
||
} else if (container.webkitRequestFullscreen) { // Chrome, Safari
|
||
container.webkitRequestFullscreen()
|
||
} else if (container.msRequestFullscreen) { // IE/Edge
|
||
container.msRequestFullscreen()
|
||
}
|
||
},
|
||
// 退出全屏（通用方法）
|
||
exitFullscreen() {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen()
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen()
|
||
} else if (document.webkitExitFullscreen) {
|
||
document.webkitExitFullscreen()
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen()
|
||
}
|
||
},
|
||
// 处理全屏状态变化
|
||
handleFullscreenChange() {
|
||
// 检查是否退出全屏（此时全屏元素应为null）
|
||
const isExit = !document.fullscreenElement &&
|
||
!document.mozFullScreenElement &&
|
||
!document.webkitFullscreenElement &&
|
||
!document.msFullscreenElement
|
||
|
||
if (isExit) {
|
||
// 退出全屏后返回上一页
|
||
this.$router.back()
|
||
}
|
||
},
|
||
// 添加全屏状态监听（兼容各浏览器）
|
||
addFullscreenListener() {
|
||
document.addEventListener('fullscreenchange', this.handleFullscreenChange)
|
||
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange)
|
||
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
|
||
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange)
|
||
},
|
||
// 移除监听
|
||
removeFullscreenListener() {
|
||
document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
|
||
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange)
|
||
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
|
||
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 确保容器占满父容器，避免全屏后显示异常 */
|
||
.fullscreen-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* 可根据需要添加其他样式（如背景色等） */
|
||
}
|
||
</style> |