基于Vue封装实现全屏功能工具类

　　import { ref } from 'vue';

　　export function useFullscreen() {

　　// 定义一个响应式的 ref 对象,用于跟踪当前是否处于全屏模式

　　const isFullscreen = ref(false);

　　// 进入全屏模式

　　const requestFullscreen = (element) => {

　　if (element.requestFullscreen) {

　　element.requestFullscreen();

　　} else if (element.webkitRequestFullScreen) {

　　element.webkitRequestFullScreen();

　　} else if (element.msRequestFullscreen) {

　　element.msRequestFullscreen();

　　}

　　};

　　// 退出全屏模式

　　const exitFullscreen = () => {

　　if (document.exitFullscreen) {

　　document.exitFullscreen();

　　} else if (document.webkitExitFullscreen) {

　　document.webkitExitFullscreen();

　　} else if (document.msExitFullscreen) {

　　document.msExitFullscreen();

　　}

　　};

　　// 切换全屏模式

　　const toggleFullscreen = (element) => {

　　if (isFullscreen.value) {

　　exitFullscreen();

　　isFullscreen.value = false;

　　} else {

　　requestFullscreen(element);

　　isFullscreen.value = true;

　　}

　　};

　　// 全屏模式变化时的处理函数

　　const handleFullscreenChange = () => {

　　isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);

　　};

　　// 监听全屏事件

　　document.addEventListener('fullscreenchange', handleFullscreenChange);

　　document.addEventListener('webkitfullscreenchange', handleFullscreenChange);

　　document.addEventListener('msfullscreenchange', handleFullscreenChange);

　　// 返回全屏相关的功能和状态

　　return {

　　isFullscreen,

　　requestFullscreen,

　　exitFullscreen,

　　toggleFullscreen,

　　};

　　}