全屏API及vue3 hook封装

最近在一个大屏项目遇到一个需求:用户可以通过一个按钮,触发页面部分模块全屏。通过以下API可以实现:

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。

且全屏状态变化会触发以下事件:

fullscreenchange 事件会在浏览器进入或退出全屏模式后立即触发。

基于以上API和事件,封装了一个简单的全屏hook

  • 响应式的全屏状态
  • 可以指定元素进入/退出全屏模式
ts 复制代码
import { onMounted, onUnmounted, ref } from "vue";

export default function useFullScreen() {
  // 响应式全局状态
  const isFullScreen = ref<boolean>(!!document.fullscreenElement);

  function fullscreenchanged() {
    // 如果有元素处于全屏模式,则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式,则该属性的值为 null。
    if (document.fullscreenElement) {
      isFullScreen.value = true;
    } else {
      isFullScreen.value = false;
    }
  }

  onMounted(() => {
    // 通过 ESC 键可以退出全屏
    // 监听全屏事件,判断当前是否处理全屏状态
    document.addEventListener("fullscreenchange", fullscreenchanged);
  });

  onUnmounted(() => {
    document.removeEventListener("fullscreenchange", fullscreenchanged);
  });

  const fullScreen = async (dom?: HTMLElement) => {
    if (!document.fullscreenElement) {
      dom && dom.requestFullscreen();
    }
  };

  const exitFullScreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    }
  };

  return {
    isFullScreen,
    fullScreen,
    exitFullScreen,
  };
}

使用示例

tsx 复制代码
const { isFullScreen, fullScreen, exitFullScreen } = useFullScreen();

// 点击触发全屏
const clickHandle = () => {
  dom && fullScreen(dom)
} 

而且需要特别注意,全屏模式,只能由用户行为触发。比如无法一进入页面就由JS直接调起全屏,此时会有错误提示

shell 复制代码
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

就算是创建一个元素,然后模拟触发点击事件也不行。只能由真实的用户行为触发。

相关推荐
22:30Plane-Moon2 天前
项目1总结其三(图片上传功能)
ide·spring boot·vue
阿࿆杰࿆3 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react
麦麦大数据5 天前
F003疫情传染病数据可视化vue+flask+mysql
mysql·flask·vue·大屏·传染病
知识分享小能手6 天前
Vue3 学习教程,从入门到精通,Axios 在 Vue 3 中的使用指南(37)
前端·javascript·vue.js·学习·typescript·vue·vue3
葡萄城技术团队7 天前
告别 DOM 的旧时代:从零重塑 Web 渲染的未来
dom
码码哈哈爱分享7 天前
Tauri 框架介绍
css·rust·vue·html
i紸定i7 天前
解决html-to-image在 ios 上dom里面的图片不显示出来
前端·ios·vue·html·html-to-image
尚学教辅学习资料9 天前
Vue3从入门到精通: 4.5 数据持久化与同步策略深度解析
vue·数据持久化
IT毕设实战小研9 天前
Java毕业设计选题推荐 |基于SpringBoot的健身爱好线上互动与打卡社交平台系统 互动打卡小程序系统
java·开发语言·vue.js·spring boot·vue·毕业设计·课程设计
第七种黄昏10 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js