后臺(tái)管理系統(tǒng)中有一個(gè)比較常見(jiàn)的功能就是全屏顯示，以方便用最大的屏幕查看系統(tǒng)，特別是在小屏模式下。

對(duì)于 screenfull 而言，瀏覽器本身已經(jīng)提供了對(duì)用的 API，點(diǎn)擊這里即可查看，這個(gè) API 中，主要提供了兩個(gè)方法：

1. Document.exitFullscreen()：該方法用于請(qǐng)求從全屏模式切換到窗口模式；

2. Element.requestFullscreen()：該方法用于請(qǐng)求瀏覽器將特定元素置為全屏模式；

但是該方法會(huì)存在一定的小問(wèn)題，比如有些區(qū)域背景顏色為黑色。?

所以通常情況下我們不會(huì)直接使用該 API 來(lái)去實(shí)現(xiàn)全屏效果，而是會(huì)使用它第三方庫(kù)。

１. 安裝插件

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);// 監(jiān)聽(tīng)變化
const change = () => {isFullscreen.value = screenfull.isFullscreen;
};// 切換事件
const onScreenToggle = () => {screenfull.toggle();
};// 設(shè)置偵聽(tīng)器
onMounted(() => {screenfull.on("change", change);
});// 刪除偵聽(tīng)器
onUnmounted(() => {screenfull.off("change", change);
});
</script><style lang="scss" scoped></style>

3. 引入組件