当前位置：首页 > VUE

vue实现全屏事件

2026-03-29 02:30:35VUE

监听全屏状态变化

使用 document 的全屏相关事件监听全屏状态变化：

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.mozFullScreenElement || 
                      document.msFullscreenElement;
  console.log('全屏状态:', isFullscreen ? '已全屏' : '已退出全屏');
}

进入全屏模式

为特定元素触发全屏，需处理不同浏览器的前缀：

vue实现全屏事件

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 示例：点击按钮全屏
<button @click="enterFullscreen(document.documentElement)">全屏</button>

退出全屏模式

统一处理不同浏览器的退出逻辑：

vue实现全屏事件

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

检测当前全屏状态

通过兼容性写法获取当前全屏元素：

function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
}

Vue组件封装示例

封装可复用的全屏功能组件：

<template>
  <div>
    <button @click="toggleFullscreen">
      {{ isFullscreen ? '退出全屏' : '进入全屏' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    };
  },
  mounted() {
    this.addEventListeners();
  },
  beforeDestroy() {
    this.removeEventListeners();
  },
  methods: {
    addEventListeners() {
      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
      // 其他前缀事件...
    },
    removeEventListeners() {
      document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
      // 其他前缀事件...
    },
    handleFullscreenChange() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement
        // 其他前缀检测...
      );
    },
    toggleFullscreen() {
      if (this.isFullscreen) {
        this.exitFullscreen();
      } else {
        this.enterFullscreen(document.documentElement);
      }
    },
    enterFullscreen(element) {
      // 实现同前文
    },
    exitFullscreen() {
      // 实现同前文
    }
  }
};
</script>