Vue 3 实现网页全屏效果

概述

在 Web 开发中，全屏模式可以提供沉浸式的用户体验，尤其是在观看视频、演示文稿或展示特定功能时。本文将介绍如何使用 Vue 3 和 Element Plus 来实现一个简单的网页全屏功能。

创建全屏按钮组件

模板部分

<template><el-button size="default" circle="false" @click="toggleFullscreen"><el-icon><FullScreen v-if="!isFullscreen" /><ExitFullScreen v-else /></el-icon></el-button>
</template>

1. 元素按钮 (<el-button>)：

   • <el-button> 是 Element Plus 库提供的按钮组件。
   • size="default" 设置按钮的大小为默认大小。
   • circle="false" 设置按钮为非圆形样式。
   • @click="toggleFullscreen" 绑定点击事件，当点击按钮时会触发 toggleFullscreen 方法。

2. 元素图标 (<el-icon>)：

   • <el-icon> 组件用于显示图标。
   • <FullScreen> 和 <ExitFullScreen> 分别表示全屏和退出全屏的图标。
   • v-if="!isFullscreen" 和 v-else 控制显示哪个图标，根据 isFullscreen 的值来切换。

Script Setup 部分

<script setup>
import { ref } from 'vue';
import { FullScreen, ExitFullScreen } from '@element-plus/icons-vue';const isFullscreen = ref(false);function toggleFullscreen() {if (!document.fullscreenElement) {document.documentElement.requestFullscreen();} else {document.exitFullscreen();}isFullscreen.value = !isFullscreen.value;
}
</script>

1. 导入依赖：

   • import { ref } from 'vue'; 导入 Vue 3 的 Composition API 中的 ref 函数。
   • import { FullScreen, ExitFullScreen } from '@element-plus/icons-vue'; 导入 Element Plus 提供的全屏和退出全屏图标。

2. 创建响应式引用：

   • const isFullscreen = ref(false); 创建一个响应式的布尔值 isFullscreen，初始值为 false。

3. 全屏切换函数：

   • function toggleFullscreen() { ... } 定义了一个方法 toggleFullscreen，当点击全屏按钮时会被调用。
   • if (!document.fullscreenElement) { ... } 检查当前是否有元素处于全屏模式。
     • 如果没有元素处于全屏模式，则使用 document.documentElement.requestFullscreen() 方法进入全屏模式。
   • else { ... } 如果已经有元素处于全屏模式，则使用 document.exitFullscreen() 方法退出全屏模式。
   • isFullscreen.value = !isFullscreen.value; 切换 isFullscreen 的值，用于控制图标的变化。

 总结

这段代码的主要功能如下：

• 定义了一个包含全屏按钮的界面，按钮上显示不同的图标来指示当前是否处于全屏模式。
• 当点击全屏按钮时，会触发 toggleFullscreen 方法，该方法会检查当前是否已经有元素处于全屏模式。
  • 如果没有元素处于全屏模式，则使用 requestFullscreen 方法使当前文档进入全屏模式。
  • 如果已经有元素处于全屏模式，则使用 exitFullscreen 方法退出全屏模式。
• isFullscreen 的值用于控制显示哪个图标，从而提供视觉反馈。

完整代码

<template><el-button size="default" circle="false" @click="updateRefresh"><el-icon><Refresh></Refresh></el-icon></el-button><el-button size="default" circle="false" @click="fullScreen"><el-icon><FullScreen></FullScreen></el-icon></el-button><el-button size="default" circle="false"><el-icon><Setting></Setting></el-icon></el-button><img src="@/../public/favicon.ico" style="margin: 0 12px"><el-dropdown :hide-on-click="false"><span class="el-dropdown-link">admin<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
</template><script setup lang="ts" name="setting">
// 获取一下 配置
import useLayOutSettingStore from '@/store/modules/setting';
let layoutSettingStore = useLayOutSettingStore();// 刷新按钮点击事件
const updateRefresh = () => {layoutSettingStore.refresh = !layoutSettingStore.refresh;
}
// 全屏按钮点击的回调
const fullScreen = () => {// DOM对象的一个属性，可以用来判断当前页面是否处于全屏状态【全屏状态：document.fullscreenElement != null】let full = document.fullscreenElementif (!full){// 文档根节点的方法requestFullscreen，实现全屏模式document.documentElement.requestFullscreen();}else{// 退出全屏模式document.exitFullscreen();}}
</script><style scoped></style>