当前位置：首页 > VUE

vue实现全屏事件

2026-02-17 03:29:16VUE

Vue 实现全屏事件的方法

在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 实现。以下是具体实现方式：

监听全屏状态变化

通过 document 对象的 fullscreenchange 事件可以监听全屏状态的变化：

vue实现全屏事件

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = document.fullscreenElement !== null;
  }
}

进入全屏模式

使用 requestFullscreen 方法可以让指定元素进入全屏状态：

methods: {
  enterFullscreen() {
    const element = document.documentElement; // 整个页面
    // 或指定某个元素：this.$refs.fullscreenElement

    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { /* Safari */
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { /* IE11 */
      element.msRequestFullscreen();
    }
  }
}

退出全屏模式

使用 exitFullscreen 方法可以退出全屏状态：

vue实现全屏事件

methods: {
  exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { /* Safari */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE11 */
      document.msExitFullscreen();
    }
  }
}

检测当前全屏状态

可以通过 document.fullscreenElement 属性检测当前是否有元素处于全屏状态：

computed: {
  isFullscreen() {
    return !!document.fullscreenElement;
  }
}

全屏样式调整

可以为全屏状态添加特定样式：

:-webkit-full-screen {
  background-color: white;
}
:-moz-full-screen {
  background-color: white;
}
:-ms-fullscreen {
  background-color: white;
}
:fullscreen {
  background-color: white;
}