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.fullscreenElement
    if (!full){
        // 文档根节点的方法requestFullscreen，实现全屏模式
        document.documentElement.requestFullscreen();
    }else{
        // 退出全屏模式
        document.exitFullscreen();
    }
    
}
</script>

<style scoped></style>