頁面的樓層圖，需要做一個全屏功能，在網上查找了很多方法()；但是不相容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;
        }
    }