后台管理系统全屏功能实现

后台管理系统中有一个比较常见的功能就是全屏显示，以方便用最大的屏幕查看系统，特别是在小屏模式下。

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

1. Document.exitFullscreen()：该方法用于请求从全屏模式切换到窗口模式；

2. Element.requestFullscreen()：该方法用于请求浏览器将特定元素置为全屏模式；

但是该方法会存在一定的小问题，比如有些区域背景颜色为黑色。 

所以通常情况下我们不会直接使用该 API 来去实现全屏效果，而是会使用它第三方库。

１. 安装插件

npm i screenfull@5.1.0

２. 封装组件

<template><div><svg-icon:icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"@click="onScreenToggle"/></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 onScreenToggle = () => {screenfull.toggle();
};// 设置侦听器
onMounted(() => {screenfull.on("change", change);
});// 删除侦听器
onUnmounted(() => {screenfull.off("change", change);
});
</script><style lang="scss" scoped></style>

3. 引入组件