witFullscreen 全屏切换按钮

witFullscreen是一个全屏切换按钮组件，用于控制页面的全屏显示状态，提供直观的图标反馈。

用法实例

<template>
  <div class="app-toolbar">
    <!-- 单独使用 -->
    <witFullscreen />
    
    <!-- 结合其他工具按钮使用 -->
    <div class="tool-group">
      <witFullscreen />
      <witDark />
      <witErrorLog />
    </div>
  </div>
</template>

<script lang="ts" setup>
// 组件无需额外配置，自动管理全屏状态
</script>

<style>
.app-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f5f7fa;
}

.tool-group {
  display: flex;
  gap: 5px;
}
</style>

API

属性名	类型	默认值	描述
无	-	-	组件无需额外属性配置

插槽

插槽名	描述
无	组件不提供插槽

事件

事件名	描述	参数
无	组件不触发外部事件	-

功能说明

1. 全屏状态切换：点击按钮可切换页面的全屏显示状态
2. 图标反馈：根据当前状态显示不同图标
   • 非全屏状态：显示全屏图标 (ri-fullscreen-fill)
   • 全屏状态：显示退出全屏图标 (ri-fullscreen-exit-fill)
3. 自动管理：使用 useFullscreen 自动管理全屏状态
4. 响应式设计：适配不同屏幕尺寸和主题

使用提示

TIP

1. 组件依赖 @vueuse/core 的 useFullscreen 功能，确保已安装该依赖
2. 点击按钮会自动切换页面的全屏状态
3. 组件样式使用了 CSS 变量，可通过主题配置进行自定义
4. 通常与其他工具按钮（如 witDark、witErrorLog）组合使用
5. 全屏状态会在浏览器标签页间共享，但不会影响其他应用程序
6. 部分浏览器可能需要用户交互才能触发全屏功能