翼度科技»论坛 编程开发 JavaScript 查看内容

全屏API及vue3 hook封装

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
最近在一个大屏项目遇到一个需求:用户可以通过一个按钮,触发页面部分模块全屏。通过以下API可以实现:
Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。
且全屏状态变化会触发以下事件:
fullscreenchange 事件会在浏览器进入或退出全屏模式后立即触发。
基于以上API和事件,封装了一个简单的全屏hook:

  • 响应式的全屏状态
  • 可以指定元素进入/退出全屏模式
  1. import { onMounted, onUnmounted, ref } from "vue";
  2. export default function useFullScreen() {
  3.   // 响应式全局状态
  4.   const isFullScreen = ref<boolean>(!!document.fullscreenElement);
  5.   function fullscreenchanged() {
  6.     // 如果有元素处于全屏模式,则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式,则该属性的值为 null。
  7.     if (document.fullscreenElement) {
  8.       isFullScreen.value = true;
  9.     } else {
  10.       isFullScreen.value = false;
  11.     }
  12.   }
  13.   onMounted(() => {
  14.     // 通过 ESC 键可以退出全屏
  15.     // 监听全屏事件,判断当前是否处理全屏状态
  16.     document.addEventListener("fullscreenchange", fullscreenchanged);
  17.   });
  18.   onUnmounted(() => {
  19.     document.removeEventListener("fullscreenchange", fullscreenchanged);
  20.   });
  21.   const fullScreen = async (dom?: HTMLElement) => {
  22.     if (!document.fullscreenElement) {
  23.       dom && dom.requestFullscreen();
  24.     }
  25.   };
  26.   const exitFullScreen = () => {
  27.     if (document.fullscreenElement) {
  28.       document.exitFullscreen();
  29.     }
  30.   };
  31.   return {
  32.     isFullScreen,
  33.     fullScreen,
  34.     exitFullScreen,
  35.   };
  36. }
复制代码
使用示例
  1. const { isFullScreen, fullScreen, exitFullScreen } = useFullScreen();
  2. // 点击触发全屏
  3. const clickHandle = () => {
  4.   dom && fullScreen(dom)
  5. }
复制代码
而且需要特别注意,全屏模式,只能由用户行为触发。比如无法一进入页面就由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】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具