vue3+ts实现全屏效果

法一：VueUse库实现

参考：https://blog.csdn.net/weixin_45711931/article/details/134113836

npm i @vueuse/core

<div ref="fullScreen"><div @click="toggle"><van-icon :name="!isFullscreen ? 'enlarge' : 'shrink'" color="red" size="40"/></div>
</div>
<script setup>
import { ref } from 'vue';
import { useFullscreen } from '@vueuse/core';
const fullScreen= ref()
const { isFullscreen, toggle } = useFullscreen(fullScreen)
</script>

如果实现的是整个屏幕的全屏，不加参数即可：

const { isFullscreen, toggle } = useFullscreen()

法二：封装全屏函数，使用

/src/utils/fullScreen.ts中

封装：

import { ref, onUnmounted } from "vue";// 扩展 Document 类型
interface FullscreenDocument extends Document {webkitExitFullscreen?: () => Promise<void>;msExitFullscreen?: () => Promise<void>;webkitFullscreenElement?: Element | null;msFullscreenElement?: Element | null;
}// 扩展 HTMLElement 类型
export interface FullscreenElement extends HTMLElement {webkitRequestFullScreen?: () => Promise<void>;msRequestFullscreen?: () => Promise<void>;
}export function useFullscreen() {const isFullscreen = ref(false);const doc = document as FullscreenDocument;// 进入全屏模式const requestFullscreen = (element: FullscreenElement) => {if (element.requestFullscreen) {element.requestFullscreen().catch((err) => {console.error("进入全屏失败:", err);});} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen();} else if (element.msRequestFullscreen) {element.msRequestFullscreen();} else {console.warn("该浏览器不支持全屏API");}};// 退出全屏模式const exitFullscreen = () => {if (doc.exitFullscreen) {doc.exitFullscreen();} else if (doc.webkitExitFullscreen) {doc.webkitExitFullscreen();} else if (doc.msExitFullscreen) {doc.msExitFullscreen();}};// 切换全屏模式const toggleFullscreen = (element: FullscreenElement) => {if (isFullscreen.value) {exitFullscreen();} else {requestFullscreen(element);}};// 处理全屏变化事件const handleFullscreenChange = () => {isFullscreen.value = !!(doc.fullscreenElement ||doc.webkitFullscreenElement ||doc.msFullscreenElement);};// 添加事件监听doc.addEventListener("fullscreenchange", handleFullscreenChange);doc.addEventListener("webkitfullscreenchange", handleFullscreenChange);doc.addEventListener("msfullscreenchange", handleFullscreenChange);// 组件卸载时清理onUnmounted(() => {doc.removeEventListener("fullscreenchange", handleFullscreenChange);doc.removeEventListener("webkitfullscreenchange", handleFullscreenChange);doc.removeEventListener("msfullscreenchange", handleFullscreenChange);});return {isFullscreen,requestFullscreen,exitFullscreen,toggleFullscreen,};
}

使用

<div><div @click="handleToggleFullscreen"  ref="fullScreen">><van-icon :name="!isFullscreen ? 'enlarge' : 'shrink'" color="red" size="40"/></div></div>
</div>import { useFullscreen, type FullscreenElement } from "@/utils/fullScreen";// 全屏
const { isFullscreen, toggleFullscreen } = useFullscreen();
const fullScreen = ref<HTMLElement | null>(null);// 处理全屏切换
const handleToggleFullscreen = () => {if (fullScreen.value) {// 确保元素存在后再调用toggleFullscreen(fullScreen.value as FullscreenElement);} else {console.warn("全屏元素尚未准备好");}
};