当前位置：首页 > VUE

vue如何实现全屏

2026-03-10 02:37:28VUE

实现全屏功能的方法

在Vue中实现全屏功能可以通过浏览器的Fullscreen API完成。以下是具体实现步骤：

进入全屏模式

使用Element.requestFullscreen()方法让指定元素进入全屏状态。通常在Vue的模板中绑定一个按钮触发该方法。

vue如何实现全屏

<template>
  <div ref="fullscreenElement">
    <button @click="enterFullscreen">进入全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    enterFullscreen() {
      const element = this.$refs.fullscreenElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) { /* Safari */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE11 */
        element.msRequestFullscreen();
      }
    }
  }
};
</script>

退出全屏模式

通过document.exitFullscreen()方法退出全屏状态。

vue如何实现全屏

<template>
  <button @click="exitFullscreen">退出全屏</button>
</template>

<script>
export default {
  methods: {
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { /* Safari */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE11 */
        document.msExitFullscreen();
      }
    }
  }
};
</script>

检测全屏状态变化

监听fullscreenchange事件，可以在全屏状态变化时执行特定逻辑。

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange); /* Safari */
  document.addEventListener('msfullscreenchange', this.handleFullscreenChange); /* IE11 */
},
methods: {
  handleFullscreenChange() {
    const isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.msFullscreenElement;
    console.log('全屏状态:', isFullscreen ? '开启' : '关闭');
  }
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
  document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
}

检查当前全屏状态

通过document.fullscreenElement属性判断当前是否有元素处于全屏状态。

methods: {
  checkFullscreen() {
    const isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.msFullscreenElement;
    return !!isFullscreen;
  }
}