vue实现全屏切换

Vue 实现全屏切换的方法

使用浏览器原生全屏 API

现代浏览器提供了全屏 API，可以通过 JavaScript 调用实现全屏切换。在 Vue 中可以通过封装这些 API 来实现全屏功能。

// 进入全屏
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();
  }
}

// 检查全屏状态
function isFullscreen() {
  return document.fullscreenElement || 
         document.webkitFullscreenElement || 
         document.msFullscreenElement;
}

// 切换全屏
function toggleFullscreen(element) {
  if (isFullscreen()) {
    exitFullscreen();
  } else {
    enterFullscreen(element);
  }
}

在 Vue 组件中使用

可以将上述方法封装为 Vue 的自定义指令或方法，方便在组件中使用。

// 在 Vue 组件中
methods: {
  toggleFullscreen() {
    const element = document.documentElement; // 整个页面
    // 或者指定某个元素：this.$refs.fullscreenElement
    toggleFullscreen(element);
  }
}

使用第三方库

可以使用专门处理全屏的 Vue 插件，如 vue-fullscreen，简化实现过程。

安装：

npm install vue-fullscreen

使用：

import VueFullscreen from 'vue-fullscreen'
Vue.use(VueFullscreen)

// 在组件中
this.$fullscreen.toggle(this.$refs.fullscreenElement, {
  callback: (isFullscreen) => {
    console.log('全屏状态变化:', isFullscreen);
  }
});

样式调整

全屏模式下可能需要调整一些样式，可以通过 CSS 伪类 :fullscreen 来实现。

:fullscreen {
  background-color: white;
}

:-webkit-full-screen {
  background-color: white;
}

:-moz-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

注意事项

• 全屏 API 必须在用户交互事件（如点击）中触发，不能自动调用
• 不同浏览器可能需要不同的前缀（webkit, ms 等）
• 移动设备上的全屏行为可能与桌面端不同
• 某些浏览器可能限制全屏功能的使用

通过以上方法可以在 Vue 应用中实现灵活的全屏切换功能，根据需求选择原生 API 或第三方库方案。