一、封装工具类
src---->utils---->新建文件FullScreen.ts
import { ref } from "vue";
export function useFullscreen() {
// 定义一个响应式的 ref 对象,用于跟踪当前是否处于全屏模式
const isFullscreen = ref(false);
// 进入全屏模式
const requestFullscreen = (element: {
requestFullscreen: () => void;
webkitRequestFullScreen: () => void;
msRequestFullscreen: () => void;
}) => {
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: any) => {
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,
};
}
二、组件中使用
<template>
<div id="fullScreen" ref="fullScreen">
<el-button type="primary" @click="toggleFullscreen($refs.fullScreen)">
{{ isFullscreen ? "退出全屏" : "全屏" }}
</el-button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useFullscreen } from "@/utils/FullScreen";
/*
*定义数据
*/
const { isFullscreen, toggleFullscreen } = useFullscreen();
/*
*定义函数
*/
/*
*组件挂载后周期
*/
onMounted(() => {});
</script>
<style scoped lang="scss"></style>