全屏API及vue3 hook封装

默风

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

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

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

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

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

• 响应式的全屏状态
  
• 可以指定元素进入/退出全屏模式
  

1. import { onMounted, onUnmounted, ref } from "vue";
3. export default function useFullScreen() {
4.   // 响应式全局状态
5.   const isFullScreen = ref<boolean>(!!document.fullscreenElement);
7.   function fullscreenchanged() {
8.     // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
9.     if (document.fullscreenElement) {
10.       isFullScreen.value = true;
11.     } else {
12.       isFullScreen.value = false;
13.     }
14.   }
16.   onMounted(() => {
17.     // 通过 ESC 键可以退出全屏
18.     // 监听全屏事件，判断当前是否处理全屏状态
19.     document.addEventListener("fullscreenchange", fullscreenchanged);
20.   });
22.   onUnmounted(() => {
23.     document.removeEventListener("fullscreenchange", fullscreenchanged);
24.   });
26.   const fullScreen = async (dom?: HTMLElement) => {
27.     if (!document.fullscreenElement) {
28.       dom && dom.requestFullscreen();
29.     }
30.   };
32.   const exitFullScreen = () => {
33.     if (document.fullscreenElement) {
34.       document.exitFullscreen();
35.     }
36.   };
38.   return {
39.     isFullScreen,
40.     fullScreen,
41.     exitFullScreen,
42.   };
43. }

复制代码

使用示例

1. const { isFullScreen, fullScreen, exitFullScreen } = useFullScreen();
3. // 点击触发全屏
4. const clickHandle = () => {
5.   dom && fullScreen(dom)
6. }

复制代码

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

1. Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

复制代码

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

来源:https://www.cnblogs.com/shapeY/p/17851986.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！