Vue全屏功能

1、安装全屏插件
项目中使用的是sreenfull插件，执行命令安装

npm install --save screenfull

2、页面中添加按钮

3、定义初始值

  data() {
    return {
      fullscreen: false
    }
  },

4、添加事件

handleFullScreen(){
  let element = document.documentElement;
  if (this.fullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
  }
  this.fullscreen = !this.fullscreen;
},