当前位置：首页 > VUE

前端vue实现全屏

2026-02-18 03:27:47VUE

实现全屏功能的方法

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

使用原生Fullscreen API

通过调用document.documentElement.requestFullscreen()方法实现全屏，退出全屏使用document.exitFullscreen()。

// 进入全屏
function enterFullscreen() {
  const element = document.documentElement;
  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();
  }
}

使用第三方库`screenfull`

screenfull是一个轻量级的库，简化了全屏API的使用，兼容性更好。

安装：

npm install screenfull

在Vue组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        console.log('Fullscreen not enabled');
      }
    }
  }
}

监听全屏状态变化

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

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    if (document.fullscreenElement) {
      console.log('Entered fullscreen');
    } else {
      console.log('Exited fullscreen');
    }
  }
}

全屏样式优化

在全屏模式下，可能需要调整样式以适应全屏显示。可以通过CSS伪类:fullscreen来实现。

:fullscreen {
  background-color: #fff;
}

:-webkit-full-screen {
  background-color: #fff;
}

:-moz-full-screen {
  background-color: #fff;
}

:-ms-fullscreen {
  background-color: #fff;
}