前端-全屏_前端全屏

安装插件

yarn add screenfull
1

实现

引入

import screenfull from "screenfull";
1

写一个触发控件

<svg-icon class="l-distance l-fullscreen" :name="isFullscreens ? 'cancelFS' : 'fullScreen'"
                @click="onFullScreen"/>

//js

const onFullScreen = () => {
      if (!screenfull.isEnabled) { //检查浏览器是否支持全屏
        proxy.$message.error(t('globa.browserVersionLow'));
      }
      state.isFullscreens = !screenfull.isFullscreen;
      store.action.updateFullscreen(!screenfull.isFullscreen);
      screenfull.toggle();
      screenfull.on('change', () => { //动态监听全屏变化-监听ecs退出时，按钮状态没有修改的情况
        //取消全屏时，要执行的操作
        if (!screenfull.isFullscreen) {
          state.isFullscreens = false;
          store.action.updateFullscreen(false);
        }
      });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果