前端大屏可视化项目 局部全屏（指定盒子全屏）

需求是这样的，我用的项目是vue admin 项目  现在需要在做大屏项目
不希望显示除了大屏的其他东西 于是想了这个办法  
至于大屏适配问题 请看我文章   底部的代码直接复制就可以运行 vue2 
px转rem 大屏适配方案 postcss-pxtorem-CSDN博客

 

<template>
  <div class="container">
    <!-- 粉色盒子 -->
    <div class="pink-box" ref="pinkBox">
      <div class="box-content">点击全屏</div>
      <button class="fullscreen-btn" @click="toggleFullscreen('pinkBox')">
        {{ isPinkFullscreen ? '退出全屏' : '全屏展示' }}
      </button>
    </div>

    <!-- 天蓝色盒子 -->
    <div class="skyblue-box" ref="skyblueBox">
      <div class="box-content">点击全屏</div>
      <button class="fullscreen-btn" @click="toggleFullscreen('skyblueBox')">
        {{ isSkyblueFullscreen ? '退出全屏' : '全屏展示' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data () {
    return {
      isPinkFullscreen: false,
      isSkyblueFullscreen: false
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {
    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  },

  beforeDestroy () {
    // 移除事件监听器
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
  },

  methods: {
    // 切换全屏状态
    toggleFullscreen (boxRef) {
      const element = this.$refs[boxRef]

      if (!document.fullscreenElement) {
        // 进入全屏
        element.requestFullscreen()
        if (boxRef === 'pinkBox') this.isPinkFullscreen = true
        else if (boxRef === 'skyblueBox') this.isSkyblueFullscreen = true
      } else {
        // 退出全屏
        if (document.exitFullscreen) document.exitFullscreen()
      }
    },

    // 处理全屏状态变化
    handleFullscreenChange () {
      if (!document.fullscreenElement) {
        this.isPinkFullscreen = false
        this.isSkyblueFullscreen = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  height: 90vh;
  background: plum;
}

.pink-box,
.skyblue-box {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

.pink-box {
  background-color: pink;
  border: 1px solid #ff9999;
}

.skyblue-box {
  background-color: skyblue;
  border: 1px solid #66b3ff;
}

.box-content {
  font-size: 20px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.fullscreen-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

:fullscreen .pink-box,
:fullscreen .skyblue-box {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}
</style>