Fullscreen 全屏

全屏切换组件，用于进入和退出浏览器全屏模式。

🎯 在线体验：登录 https://vue.youlai.tech 后，点击右上角导航栏的全屏图标即可体验。

功能特性

• 🖥️ 全屏切换 - 一键进入/退出全屏模式
• ⌨️ 快捷键 - 支持 F11 快捷键
• 🎨 图标切换 - 根据状态显示不同图标
• 🔔 状态提示 - 全屏状态变化时提示

基础用法

组件已集成在布局中，无需手动引入：

<template>
  <div class="navbar">
    <Fullscreen />
  </div>
</template>

手动使用

<template>
  <div>
    <el-button @click="toggleFullscreen">
      {{ isFullscreen ? '退出全屏' : '进入全屏' }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isFullscreen = ref(false)

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
  isFullscreen.value = !!document.fullscreenElement
})
</script>

快捷键

快捷键	功能
F11	切换全屏模式
Esc	退出全屏模式

样式定制

// 自定义全屏按钮样式
.fullscreen-btn {
  cursor: pointer;
  font-size: 18px;
  
  &:hover {
    color: var(--el-color-primary);
  }
}

浏览器兼容性

全屏 API 在现代浏览器中都有良好支持：

浏览器	支持情况
Chrome	✅ 支持
Firefox	✅ 支持
Safari	✅ 支持
Edge	✅ 支持

注意事项

1. 用户交互：全屏请求必须由用户交互触发（如点击事件）
2. iframe 限制：在 iframe 中使用需要设置 allowfullscreen 属性
3. 移动端：部分移动端浏览器可能不支持全屏 API

相关链接

• 布局系统
• MDN Fullscreen API