vue门户实现全屏显示

实现 Vue 门户全屏显示的方法

使用浏览器原生全屏 API

通过调用 document.documentElement.requestFullscreen() 实现全屏，兼容现代浏览器。需注意浏览器前缀差异（如 webkitRequestFullscreen）。

// 进入全屏
function enterFullscreen() {
  const el = document.documentElement;
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  }
}

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

监听全屏状态变化

通过 fullscreenchange 事件监听全屏状态变更，更新 Vue 组件内的状态。

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

封装为 Vue 指令

将全屏逻辑封装为自定义指令，便于复用。

Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      if (binding.value) {
        enterFullscreen();
      } else {
        exitFullscreen();
      }
    });
  }
});

// 使用方式
<button v-fullscreen="isFullscreen">切换全屏</button>

使用第三方库

若需简化实现，可引入 screenfull.js 等库处理兼容性问题。

npm install screenfull

import screenfull from 'screenfull';

// 切换全屏
methods: {
  toggleFullscreen() {
    if (screenfull.isEnabled) {
      screenfull.toggle();
    }
  }
}

CSS 全屏样式适配

确保内容在全屏模式下正确拉伸，避免布局错乱。

:fullscreen, ::backdrop {
  background-color: #fff; /* 设置全屏背景色 */
}

注意事项

• 全屏 API 需用户交互（如点击事件）触发，不可在异步回调中直接调用。
• 移动端浏览器可能对全屏支持有限，需测试目标平台兼容性。
• 全屏状态下部分浏览器会隐藏默认 UI（如地址栏），需做好用户体验提示。