vue3后台管理框架geeker admin -- 全屏0 环境 Node.js 16.x+ pnpm 7.x+ Git

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

useUserStore

2 前言

先找到src/layouts/components/Header/ToolBarRight.vue里的<Fullscreen xxx />，点进去，找到Tabs组件，它是我们要探索的主角。

3 正文

找到src/layouts/components/Header/components/Fullscreen.vue，这里重点是import screenfull from "screenfull";，这个screenfull从哪里来的，有时候我们不想到package中dependencies去找它，因为你找到它，还是要上网搜一下的。还不如直接上网搜呢，npm中确实有，然后用法完全一致，那大概就错不了。这里有两个重点：

// 它是布尔类型 ——> 判断你当前使用浏览器是否支持全屏功能
screenfull.isEnabled
// 它是布尔类型 ——> 判断你当前页面是否全屏
screenfull.isFullscreen

screenfull.toggle()`screenfull库中的一个方法，用于切换全屏状态。

具体代码如下：

首先i图标里有个判断，isFullscreen若是全屏就是缩写图标，否则就是放大的图标，看前面的两张图。这里的isFullscreen从哪里来的呢，看第12行，先得到一个默认的是否全屏的状态值或者说布尔值，onMounted里面主要是监听，当屏幕状态发生改变的时候，实时更新isFullscreen的值。handleFullScreen先做了判断浏览器是否支持全屏，然后切换全屏状态。

4 总结

主要是了解screenfull.isEnabled、screenfull.isFullscreen、screenfull.toggle()，以及触发了toggle()后，screenfull监听，实时改变isFullscreen.value，来改变是缩放图标还是放大图标。