前端项目全屏化处理方案_前端页面打开自动全屏

前言

做后台管理系统的时候，按到F11，发现全屏了就想着也做个全屏放大的功能。

要求：

1. 点击放大图标浏览器自动全屏
2. 图标变为缩小
3. 再次点击退出全屏

方案一

原生js

原理：

对于 screenfull 而言，浏览器本身已经提供了对用的 API，点击这里即可查看，这个 API 中，主要提供了两个方法：

Document.exitFullscreen()：该方法用于请求从全屏模式切换到窗口模式
Element.requestFullscreen()：该方法用于请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式

比如我们可以通过 document.getElementById(‘app’).requestFullscreen() 在获取 id=app 的 DOM 之后，把该区域置为全屏

方案二

封装 screenfull

步骤

1. 下载依赖包 screenfull

npm i screenfull
1

2. components/Screenfull/index

  <template>
   <div>
     <el-button @click="onToggle"
       >点击{{ isFullscreen ? "exit-fullscreen" : "fullscreen" }}</el-button
     >
   </div>
 </template>

 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import screenfull from "screenfull";

 // 是否全屏
 const isFullscreen = ref(false);

 // 监听变化
 const change = () => {
   isFullscreen.value = screenfull.isFullscreen;
 };

 // 切换事件
 const onToggle = () => {
   screenfull.toggle();
 };

 // 设置侦听器
 onMounted(() => {
   screenfull.on("change", change);
 });

 // 删除侦听器
 onUnmounted(() => {
   screenfull.off("change", change);
 });
 </script>

 <style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3. 引入该组件

<screenfull class="right-menu-item hover-effect" />
import Screenfull from "@/components/Screenfull";
1
2

方案三

使用@vueuse/core

步骤

1. 下载npm

npm i @vueuse/core
1

2. 使用

import { useFullscreen } from '@vueuse/core'
const { toggle } = useFullscreen() //toggle即为全屏方法 二次调用即为退出全屏
1
2