若依后台管理系统,点击全屏的时候,隐藏头部和左侧菜单栏

1.首先在mounted写一个全屏监听事件

  mounted() {
    // 监听全屏事件
    document.addEventListener('fullscreenchange', this.handleFullScreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullScreenChange);
  },

2.methods写事件

    handleFullScreenChange() {
      const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement;
      if (isFullScreen) {
        // 进入全屏模式时的处理逻辑 
        this.$store.dispatch('app/toggleSideBarHide', true);
        document.querySelector('.navbar').style.display = "none"
        document.querySelector('.tags-view-container').style.display = "none"  
      } else {
        // 退出全屏模式时的处理逻辑 
        this.$store.dispatch('app/toggleSideBarHide', false);
        document.querySelector('.navbar').style.display = ""
        document.querySelector('.tags-view-container').style.display = "" 
      }
    }

猜你喜欢

转载自blog.csdn.net/qq_43770056/article/details/130127514
今日推荐