VUE 元素全屏，退出监测

html:

<div class="fullScreen">
  <i class="el-icon-full-screen" @click="toggleFullscreen"></i>
</div>

data:

data(){

　　return {

　　　　isShowFullScreen: false,
　　　　isShowFullScreenIndex: 0

　　}

}

mounted:

let that = this;
window.onresize = function () {
　//监测退出
  console.log(that.isShowFullScreenIndex);
  if (that.isShowFullScreenIndex > 0) {
    that.isShowFullScreen = false;
    that.isShowFullScreenIndex = 0;
    console.log('我退出来了');
  } else {
    that.isShowFullScreenIndex++;
  }
}

destroyed:

destroyed() {
  this.isShowFullScreenIndex = 0;
  window.onresize = null;
},

methods：
toggleFullscreen() {
  let _this = this;
  this.isShowFullScreenIndex = 0;
  // let el = document.documentElement;
  let el = document.getElementById('diagramWrap');
  if (document.fullscreenElement === null) {
    _this.openFullscreen(el);
  } else {
    _this.quitFullscreen();
  }
},
openFullscreen(element) {
  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.isShowFullScreen = true;
},
quitFullscreen() {
  this.isShowFullScreen = false;
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}