当前位置：首页 > VUE

Vue实现网页全屏

2026-03-09 03:02:42VUE

Vue实现网页全屏的方法

使用浏览器原生API

Vue中可以通过调用浏览器原生全屏API实现全屏功能。以下是一个基础实现示例：

// 在Vue组件方法中
toggleFullscreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`);
    });
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

使用第三方库

对于更简单的实现，可以安装screenfull库：

Vue实现网页全屏

npm install screenfull

在Vue组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        console.warn('浏览器不支持全屏功能');
      }
    }
  }
}

全屏样式处理

在全屏状态下可能需要特殊样式，可以通过CSS伪类处理：

Vue实现网页全屏

:fullscreen {
  background-color: #fff;
}

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

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

全屏事件监听

需要监听全屏状态变化时：

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

浏览器兼容性处理

不同浏览器需要前缀处理：

const el = document.documentElement;
const requestFullscreen = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestFullscreen) {
  requestFullscreen.call(el);
}

以上方法可以根据项目需求选择使用，第三方库方案通常更简洁且兼容性更好。