vue页面实现全屏功能

       页面的楼层图，需要做一个全屏功能，在网上查找了很多方法(参考了这位博主的代码https://www.cnblogs.com/lyls/p/7446239.html)；但是不兼容IE（IE可以实现全屏功能，但是不能退出全屏），代码如下：

修改之后的代码：
html部分片段:

<div style="width: 100%; height: 100%;" >
   <div id="canvasContentDiv" style="width: 100%; height: 100%;" @dblclick="toggleFullScreen($event)">
       <canvas id="canvasPaintArea" style="width: 100%; height: 100%;"></canvas>
   </div>
 </div>

data：

isFullscreen:true

methods：

FullScreen(el){
          if(this.isFullscreen){//退出全屏
            if(document.exitFullscreen){
              document.exitFullscreen()
            }else if( document.mozCancelFullScreen){
              document.mozCancelFullScreen()
            }else if(document.webkitExitFullscreen){
              //改变平面图在google浏览器上面的样式问题
              $("#canvasPaintArea").css("position","static").css("width","100%");
              $(".buildingsFloor").css("width","70%");
              $(".floor-plan").css("width","78%");
              document.webkitExitFullscreen()
            }else if(!document.msRequestFullscreen){
              document.msExitFullscreen()
            }
          }else{    //进入全屏
            if(el.requestFullscreen){
              el.requestFullscreen()
            }else if(el.mozRequestFullScreen){
              el.mozRequestFullScreen()
            }else if(el.webkitRequestFullscreen){
              //改变平面图在google浏览器上面的样式问题
              $("#canvasPaintArea").css("position","absolute").css("width","94%");
              $(".buildingsFloor").css("width","98%");
              $(".floor-plan").css("width","90%");
              el.webkitRequestFullscreen();    
            }else if(el.msRequestFullscreen){
              el.msRequestFullscreen()            
            }
          }
      },
      toggleFullScreen(e){
          this.isFullscreen=!this.isFullscreen;
          var el=e.srcElement||e.target;//target兼容Firefox
          this.FullScreen(el);
      },

待续。。。
现在需求改变：点击全屏按钮，显示全屏；点击esc按钮退出全屏

html部分片段

     <div v-if="floorDetails">
            <el-dialog :title="dialogTitle" :visible.sync="detailsM" class="detailsM"  :modal-append-to-body="false"  :close-on-press-escape="false">
             <div class="floor-plan">
                <div style="width: 100%; height: 100%;">
                    <div id="canvasContentDiv" style="width: 100%; height: 100%;">
                        <canvas id="canvasPaintArea" style="width: 100%; height: 100%;"></canvas>
                    </div>
                </div>
                <div></div>
             </div>
              <i class="fa fa-expand" style="right: 67px;position: absolute;top: 14px;color: white;cursor: pointer;" @click="toggleFullScreen($event)"></i>
            </el-dialog>
      </div>

methods：

    checkFull() {
        var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        if (isFull === undefined) {isFull = false;}
        return isFull
    } ,
    FullScreen(el){
      if(this.isFullscreen){//退出全屏
        if(document.exitFullscreen){
          document.exitFullscreen()
        }else if( document.mozCancelFullScreen){
          document.mozCancelFullScreen()
        }else if(document.webkitExitFullscreen){
          //改变平面图在google浏览器上面的样式问题
          // $("#canvasPaintArea").css("position","static").css("width","100%");
          // $(".buildingsFloor").css("width","70%");
          // $(".floor-plan").css("width","78%");
          document.webkitExitFullscreen()
        }else if(!document.msRequestFullscreen){
          document.msExitFullscreen()
        }
      }else{    //进入全屏
        if(el.requestFullscreen){
          el.requestFullscreen()
        }else if(el.mozRequestFullScreen){
          el.mozRequestFullScreen()
        }else if(el.webkitRequestFullscreen){
          //改变平面图在google浏览器上面的样式问题
          // $("#canvasPaintArea").css("position","absolute").css("width","94%");
          // $(".buildingsFloor").css("width","98%");
          // $(".floor-plan").css("width","90%");
          el.webkitRequestFullscreen(); 
        }else if(el.msRequestFullscreen){
          this.isFullscreen=true;
          el.msRequestFullscreen()            
        }
      }
  },
  toggleFullScreen(e){
      this.isFullscreen=!this.isFullscreen;
      this.FullScreen(document.getElementById("canvasPaintArea"));
  },

mounted

   let _that=this;
   window.onresize = function() {
        if (!_that.checkFull()) {
            //要执行的动作
           _that.isFullscreen=true;
        }
    }