在vue+elementui实现后台系统全屏展示

这是效果图 点击全屏按钮 浏览器的菜单栏消失 屏幕上只显示我们的后台系统

首先安装系统全屏插件screenfull

npm install --save screenfull

安装完成后 在点击全屏这个事件上 做操作

<template>
 <div id="aa">
        <i @click="fullScreen()" class="full-screen"></i>
      </div>
</template>

引入插件

<script>
import screenfull from 'screenfull'
</script>

在点击事件上直接复制下面函数

fullScreen () {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },

好了 这样我们的点击全屏功能就可以啦