当前位置：首页 > VUE

vue实现全屏事件

2026-01-16 02:11:42VUE

Vue 实现全屏事件的方法

在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：

使用原生 Fullscreen API

通过调用 Element.requestFullscreen() 方法可以让指定元素进入全屏模式，退出全屏则使用 document.exitFullscreen()。

// 进入全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { // Safari
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE11
    document.msExitFullscreen();
  }
}

在 Vue 组件中使用

将全屏逻辑封装到 Vue 组件中，通过按钮或其他交互触发。

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      const element = this.$refs.fullscreenElement;
      if (!document.fullscreenElement) {
        this.enterFullscreen(element);
      } else {
        this.exitFullscreen();
      }
    },
    enterFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }
};
</script>

使用第三方库

可以使用第三方库如 screenfull 来简化全屏操作，它提供了跨浏览器的兼容性支持。

安装 screenfull：

npm install screenfull

在 Vue 中使用：

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.fullscreenElement);
      }
    }
  }
};
</script>

监听全屏状态变化

可以通过监听 fullscreenchange 事件来响应全屏状态的变化。

vue实现全屏事件

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    if (document.fullscreenElement) {
      console.log('进入全屏');
    } else {
      console.log('退出全屏');
    }
  }
}