Vue3项目全屏化处理方案(vue 全屏)
1：screenfull 原理及方案分析
screenfull （全屏） 功能实现
原理：
对于 screenfull 而言，浏览器本身已经提供了对用的 API，点击这里即可查看，这个 API 中，主要提供了两个方法：
Document.exitFullscreen()：该方法用于请求从全屏模式切换到窗口模式Element.requestFullscreen()：该方法用于请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式比如我们可以通过
document.getElementById('app').requestFullscreen()在获取id=app的DOM之后，把该区域置为全屏
但是通常情况下我们不会直接使用该 API 来去实现全屏效果，而是会使用它的包装库 screenfull
方案：
那么明确好了原理之后，接下来实现方案就比较容易了。
整体的方案实现分为两步：
封装
screenfull组件展示切换按钮
基于 screenfull 实现切换功能
引入该组件
2：方案落地：screenfull
明确好了方案之后，接下来我们就落地该方案
封装 screenfull 组件：
下载依赖包 screenfull
npm i screenfull@5.1.0 复制代码
创建
components/Screenfull/index<template> <div> <el-button @click="onToggle" >点击{{ isFullscreen ? "exit-fullscreen" : "fullscreen" }}</el-button > </div> </template> <script setup> import { ref, onMounted, onUnmounted } from "vue"; import screenfull from "screenfull"; // 是否全屏 const isFullscreen = ref(false); // 监听变化 const change = () => { isFullscreen.value = screenfull.isFullscreen; }; // 切换事件 const onToggle = () => { screenfull.toggle(); }; // 设置侦听器 onMounted(() => { screenfull.on("change", change); }); // 删除侦听器 onUnmounted(() => { screenfull.off("change", change); }); </script> <style lang="scss" scoped></style> 复制代码引入该组件
<screenfull class="right-menu-item hover-effect" /> import Screenfull from "@/components/Screenfull";
作者：云牧
链接：https://juejin.cn/post/7040745259277484046