Vue中,点击全屏按钮,进入全屏

<button>全屏/取消全屏button>
data() {
     
  return {
     
    fullscreen: false
  }
},
methods: {
     
  handleFullScreen(){
     
    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) {
     
        // IE11
        element.msRequestFullscreen();
      }
    }
    this.fullscreen = !this.fullscreen;
  }
}

你可能感兴趣的:(vue,js,js)