前端全屏

安装插件

yarn add screenfull


实现

引入

import screenfull from "screenfull";


写一个触发控件

<svg-icon class&＃61;"l-distance l-fullscreen" :name&＃61;"isFullscreens ? &＃39;cancelFS&＃39; : &＃39;fullScreen&＃39;"&＃64;click&＃61;"onFullScreen"/>//jsconst onFullScreen &＃61; () &＃61;> {if (!screenfull.isEnabled) { //检查浏览器是否支持全屏proxy.$message.error(t(&＃39;globa.browserVersionLow&＃39;));}state.isFullscreens &＃61; !screenfull.isFullscreen;store.action.updateFullscreen(!screenfull.isFullscreen);screenfull.toggle();screenfull.on(&＃39;change&＃39;, () &＃61;> { //动态监听全屏变化-监听ecs退出时&＃xff0c;按钮状态没有修改的情况//取消全屏时&＃xff0c;要执行的操作if (!screenfull.isFullscreen) {state.isFullscreens &＃61; false;store.action.updateFullscreen(false);}});}


效果