美文网首页
全屏切换,退出全屏

全屏切换,退出全屏

作者: Amanda妍 | 来源:发表于2022-03-09 11:01 被阅读0次

代码部分:
首先在created中监听窗口切换事件和键盘按下事件,在组件销毁之前移除监听:

 beforeUnmount(){
      window.removeEventListener('keydown', this.quit)
    },
    created(){
      window.addEventListener('keydown', this.quit)
      this.windowResizeEvent()
    },

判断是否是全屏:

isFullScreen() {
        return  !! (
          document.fullscreen ||
          document.mozFullScreen ||
          document.webkitIsFullScreen ||
          document.webkitFullScreen ||
          document.msFullScreen
        )
      },

全局监听窗口切换事件:

windowResizeEvent(callback) {
        window.onresize = ()=> {
          if (this.resizeTimer) {
            clearTimeout(this.resizeTimer);
          }
          this.resizeTimer = setTimeout(()=> {
            if(!this.isFullScreen()){
              this.$parent.$parent.showMenu = this.$parent.$parent.showTop = true
            }
          }, 100);
        }
      }

退出全屏事件:

 quit(e){
        let key = e.keyCode
        if (key === 122) {
          this.fullScreen()
          e.preventDefault()
          return
        }
        e.stopPropagation()
      },

fullScreen(){
         let element = document.documentElement;
        if (this.isFullScreen()) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.$parent.$parent.showMenu = this.$parent.$parent.showTop = true
        } 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.$parent.$parent.showMenu = this.$parent.$parent.showTop = false
        }
      },

相关文章

网友评论

      本文标题:全屏切换,退出全屏

      本文链接:https://www.haomeiwen.com/subject/fnktdrtx.html