一蓑烟雨任凭生 发表于 2023-11-23 18:04:42

全屏API及vue3 hook封装

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

[*]响应式的全屏状态
[*]可以指定元素进入/退出全屏模式
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,
};
}使用示例
const { isFullScreen, fullScreen, exitFullScreen } = useFullScreen();

// 点击触发全屏
const clickHandle = () => {
dom && fullScreen(dom)
} 而且需要特别注意,全屏模式,只能由用户行为触发。比如无法一进入页面就由JS直接调起全屏,此时会有错误提示
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】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 全屏API及vue3 hook封装