Vue3.5 企业级管理系统实战（十一）：全屏切换组件

本篇主要探讨如何在导航栏（Navbar）中添加全屏切换按钮，并借助功能强大的 screenfull 插件，丝滑实现全屏切换功能，为用户打造更为便捷、流畅的交互体验。

1 安装插件 screenfull

screenfull 是一个轻量级的 JavaScript 库，用于简化在网页中实现全屏功能的操作。它屏蔽了不同浏览器在全屏 API 上的差异，提供统一且易用的接口，增强了跨浏览器兼容性。

使用时，首先通过 npm 或 yarn 安装该插件。其核心方法包括：request 用于请求指定元素进入全屏；exit 用于退出全屏；toggle 用于切换全屏状态。

例如，若要让 id 为 myDiv 的元素进入全屏，只需检查 screenfull.isEnabled 为 true 后，调用 screenfull.request(document.getElementById('myDiv')) 即可。此外，还能监听 change 事件，根据全屏状态变化执行相应逻辑。

通过 pnpm 安装 screenfull 插件，代码如下：

pnpm install screenfull

2 Screenfull 组件开发

在 src/components 下新建 Screenfull 文件夹，新建 index.vue 文件，代码如下：

//src/components/Screenfull/index.vue
<template><!-- 定义一个 SVG 图标组件，用于切换全屏状态 --><svg-icon@click="handleClick"custom-class="w-2em h-2em":icon-name="isFullScreen? 'ant-design:fullscreen-exit-outlined': 'ant-design:fullscreen-outlined'"></svg-icon>
</template><script lang="ts" setup>
// 引入 screenfull 库，用于处理全屏相关操作
import screenfull from "screenfull";
// 引入 Vue 的 ref 函数，用于创建响应式数据
import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from "vue";// 创建一个响应式变量 isFullScreen，用于记录当前是否处于全屏状态，初始值为 false
const isFullScreen = ref(false);
// 获取当前组件实例
const { proxy } = getCurrentInstance()!;// 定义点击事件处理函数，用于处理图标点击时的操作
function handleClick() {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持，切换全屏状态screenfull.toggle();} else {// 如果不支持，通过消息提示告知用户浏览器不支持全屏proxy!.$message("浏览器不支持全屏");}
}// 定义更新全屏状态的函数，用于监听全屏状态变化并更新 isFullScreen 的值
function updateFullscreenStatus() {// 获取当前是否处于全屏状态，并更新 isFullScreen 的值isFullScreen.value = screenfull.isFullscreen;
}// 组件挂载完成后执行的生命周期钩子函数
onMounted(() => {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持，监听全屏状态变化事件，并在状态变化时调用 updateFullscreenStatus 函数screenfull.on("change", updateFullscreenStatus);}
});// 组件即将卸载前执行的生命周期钩子函数
onBeforeUnmount(() => {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持，移除对全屏状态变化事件的监听screenfull.off("change", updateFullscreenStatus);}
});
</script>

这段代码实现了一个切换全屏状态的功能，通过点击 SVG 图标来切换全屏和退出全屏，同时会根据当前的全屏状态显示不同的图标。并且在组件挂载和卸载时，分别添加和移除对全屏状态变化的监听。

3 页面引用

在 src/layout/components/Navbar.vue 中引入 Screenfull 组件，代码如下：

//src/layout/components/Navbar.vue
<template><div class="navbar" flex><hamburger@toggleCollapse="toggleSidebar":collapse="sidebar.opened"></hamburger><BreadCrumb></BreadCrumb><div flex justify-end flex-1 items-center mr-20px><screenfull mx-5px></screenfull></div></div>
</template><style scoped lang="scss">
.navbar {@apply h-[var(--navbar-height)];
}
</style><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
// 在解构的时候要考虑值是不是对象，如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore();
</script>

npm run dev 启动后，页面效果如下：