前言

全屏功能是常见的功能，下面我们一起来封装一个全屏组件，当后续碰到全屏需求，直接cv就能愉快地学习（摸鱼）。

实现

首先技术栈选用vue，然后下载screenfull依赖库帮助我们快速实现全屏功能，总的来说就是对scrennfull的封装。

screenfull

screenfull是js一个库可以将元素全屏展示，监听全屏状态，检查浏览器是否支持全屏。该库使用方法很简单，安装之后在想用的页面引入即可。

   // 安装
   yarn add screenfull -S
   // 引入
   import screenfull from 'screenfull'

常用的属性方法如下：

isEnabled：判断浏览器是否支持全屏，布尔值。
isFullscreen：判断当前页面是否是全屏，布尔值。
request(e)：将元素全屏，接收一个参数dom元素，该参数可选，默认为html元素。
exit():退出全屏模式。
toggle():切换全屏模式。
on():监听切换全屏状态的函数。
off():关闭监听函数。
了解完这些方法，实现就非常简单了，直接用toggle()进行全屏切换。

代码

我们先设置一个全屏按钮，当点击的时候就触发toggle方法，当然在触发前我们可以判断一下是否支持全屏，如果不支持就给出个提示，按钮的形状也可以根据是否全屏去切换。

   <template>
  <div>
    <el-icon
      :class="isFullStatus ? 'CloseBold' : 'el-icon-full-scree'"
      @click="handleScreenFull"
    ></el-icon>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
let isFullStatus = ref(false);
const handleScreenFull = () => {
  if (!screenfull.isEnabled) {
    ElMessage.warning('该浏览器不支持全屏操作');
    return;
  }
  screenfull.toggle();
  isFullStatus.value = !isFullStatus.value;
};
</script>