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

需求是这样的，我用的项目是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 = trueelse if (boxRef === 'skyblueBox') this.isSkyblueFullscreen = true} else {// 退出全屏if (document.exitFullscreen) document.exitFullscreen()}},// 处理全屏状态变化handleFullscreenChange () {if (!document.fullscreenElement) {this.isPinkFullscreen = falsethis.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>