vue---网页全屏

使用screenfull插件

安装：npm install --save screenfull

导入：import screenfull from "screenfull"

首页： 一定要有一个ref绑定，这里用ref=‘shcontainer’  绑定

<template>
  <div id="zonghebox" ref='shcontainer'>
    //这里写页面代码
  </div>
</template>

 这儿是点击按钮以及方法 

<el-button @click='getFullCreeen' circle>
    <i class='el-icon-rank' style='color: #ffffff'></i>
</el-button>

data中 定义：
fullscreen: true,
num1: 0,
num2: 0,

//监听
watch: {
    fullscreen () {
      this.num1++
      this.num2++
    }
  },

//方法
getFullCreeen(){
      let me = this;
      if (!screenfull.enabled) {
        me.$message('您的浏览器不能全屏')
        return false
      }
      me.fullscreen = screenfull.isFullscreen//布尔值——当前页面是否全屏
      screenfull.toggle(me.$refs.shcontainer)//指定元素全屏
 },