前端页面系统全屏功能实现方法

页面效果如图：

页面代码实现如下：
（记得要安装对应依赖 [screenfull]，store里面要添加对应配置）

          <div class="userInfo text-left">
            <el-dropdown :show-timeout="0">
              <div>
                {{ $store.state.user.fullName }},欢迎您
                <i class="el-icon-arrow-down el-icon--right" />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">
                    <i class="iconfont ico-zhuxiao" />
                    注销
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push('/change-pass')">
                    <i class="iconfont ico-mima" />
                    修改密码
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="handleScreenFull">
                    <i :class="['iconfont', isFullscreen ? 'ico-tuichuquanping' : 'ico-quanping']"></i>
                    {{ isFullscreen ? '退出全屏' : '进入全屏' }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
            <div class="nowTime">{{ nowTime }}</div>
          </div>

import screenfull from 'screenfull'
export default {
  computed: {
    ...mapGetters(['permissionRoutes', 'theme', 'isFullscreen']),
  },
  mounted() {
    // window.addEventListener('resize', this.getWindowWidth)
    window.onresize = () => {
      return (() => {
        window.windowWidth = window.innerWidth
        this.windowWidth = window.windowWidth
      })()
    }

    let _this = this
    window.addEventListener(
      'resize',
      () => {
        // 全屏下监控是否按键了ESC
        if (_this.checkFull()) {
          // 全屏下按键esc后要执行的动作
          screenfull.exit()
          
          this.$store.dispatch('settings/changeSetting', {
          key: 'isFullscreen',
          value: false
        })
        }
      },
      false
    )
  },
  methods: {
    // 页面全屏功能
    handleScreenFull() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      // screenfull.toggle();
      if (this.isFullscreen) {
        screenfull.exit()
        this.$store.dispatch('settings/changeSetting', {
          key: 'isFullscreen',
          value: false
        })
      } else {
        screenfull.request()
        this.$store.dispatch('settings/changeSetting', {
          key: 'isFullscreen',
          value: true
        })
      }
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      let isFullscreen =
        window.fullScreen ||
        window.isFullscreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled
      let isFull = document.fullscreenEnabled && !isFullscreen
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },
  }