klp-oa/klp-ui/src/views/dashboard/demo.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>