监听浏览器是否全屏

点击按钮和按键f11

data:

methods:

 

 

1. 数据属性：

   • isFullscreen：用于存储当前文档是否处于全屏模式的布尔值。

2. 方法：

   • checkFullscreen：检查当前文档是否处于全屏模式，并更新 isFullscreen 值，考虑所有浏览器兼容性。
   • toggleFullscreen：根据当前状态调用 enterFullscreen 或 exitFullscreen 方法。
   • enterFullscreen：让页面进入全屏模式，兼容多个浏览器的实现，并捕获可能的错误。
   • exitFullscreen：让页面退出全屏模式，兼容多个浏览器的实现，并捕获可能的错误。
   • handleKeydown：处理 keydown 事件，当按下 F11 键时，切换全屏模式并防止默认行为。

3. 生命周期钩子：

   • mounted：组件挂载时调用 checkFullscreen 方法，并添加多个浏览器特定的 fullscreenchange 事件监听器，以便在全屏状态改变时更新 isFullscreen。还添加了一个全局的 keydown 事件监听器，用于捕捉 F11 键。
   • beforeDestroy：组件销毁之前移除所有 fullscreenchange 和 keydown 事件监听器。

4. 模板：

   • 使用条件渲染 (v-if / v-else) 来根据 isFullscreen 的值显示不同的文本信息。
   • 提供一个按钮来调用 toggleFullscreen 方法，以切换全屏状态。