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