当前位置：首页 > news >正文

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

news 来源：原创 2025/5/17 10:01:50

本篇主要探讨如何在导航栏（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 启动后，页面效果如下：