js实现全屏

 <a-button type="primary" @click="screen">全屏</a-button>

data() {
      return {
           fullscreen: false,
       };
},   
methods: {
      screen() {
          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) {
                  element.msRequestFullscreen();
              }
          }
          this.fullscreen = !this.fullscreen;
      },
},

使用的是sreenfull插件，执行命令安装

npm install --save screenfull

引入

import screenfull from ‘screenfull'

<a-button type="primary" @click="screen">全屏</a-button>

data() {
	return {
		fullscreen: false
	};
},
methods: {
	screen() {
	   // 如果不允许进入全屏，发出不允许提示
	   if (!screenfull.enabled) {
	    this.$message("您的浏览器不能全屏");
	    return false;
	   }
	   screenfull.toggle();
	   this.$message.success("全屏啦");
   },
}