法一：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("全屏元素尚未准备好");
  }
};