通过单击按钮实现全屏、退出全屏

没什么好说的，看代码
HTML

<el-button size="mini" type="success" @click="intScreen">全屏显示</el-button>
<el-button size="mini" type="success" @click="outScreen">退出全屏</el-button>

JS

    // 全屏
    intScreen() {
      var docElm = document.documentElement;
      if (docElm.requestFullscreen) {  //W3C
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {   //FireFox
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullScreen) {  //Chrome等
        docElm.webkitRequestFullScreen();
      } else if (elem.msRequestFullscreen) {  //IE11
        elem.msRequestFullscreen();
      }
    },
    // 退出全屏
    outScreen() {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
       } else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
       } else if (document.msExitFullscreen) {
         document.msExitFullscreen();
       }
     },

或者监听屏幕变化的大小进行相应的操作
例如:我这里兼容了两种分辨率下的屏幕.按f11就影藏侧边栏和标题等等

    window.addEventListener('resize', ()=> {
      var height = document.documentElement.clientHeight;
      var width = document.documentElement.clientWidth;
      if((height >= 1079 && width == 1920) || (height >= 1049 && width == 1680)){
        this.main = true;
        this.aside = false;
      }else{
        this.main = false;
        this.aside = true;
      }
    })

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~