怎么隐藏侧边栏和顶部导航栏实现完全的全屏

请教下，怎么样实现完全的全屏，就是在全屏的时候把侧边栏和顶部导航栏也隐藏掉，小白提问，希望各位大佬不吝赐教

侧边栏隐藏可以使用this.$store.dispatch('app/toggleSideBarHide', true);
顶部栏没有加这种，你可以参考侧边栏的实现的逻辑。

或者使用
1、src\assets\styles\index.scss 新增

//main-container全局样式
.app-container {
  padding: 20px;
  background-color: white;
}

2、指定元素全屏

// 全屏
fullScreen() {
  const element = document.getElementsByClassName('app-container')[0];
  screenfull.toggle(element);
},

输入图片说明

非常感谢我试下

fullScreen() {
const element = document.getElementsByClassName('app-container')[0];
screenfull.toggle(element);
},

这种模式的全屏，编辑新增是点击后，是展示不出来的，需要退出全屏后，才可以展示出来

我看新的代码已经实现了首页侧边栏会隐藏我加了this.$store.dispatch('app/toggleSideBarHide', true)也没有起作用可否指点一二

我是通过在src/components/ScreenFull/index.vue 里面把 screenfull.toggle() 改成 screenfull.toggle(this.$parent.$parent.$refs.appMainContent.$refs.section)实现的，说白了就是利用这个全屏组件screenfull.toggle(xxx)可以实现某一个元素的全屏，其中xxx代表要实现全屏的元素

顶部栏怎么隐藏呢?

输入图片说明

如果只是想隐藏掉顶部导航栏，在layout/index.vue里可以试试在全屏的时候把顶部导航栏这部分元素设置隐藏掉

我试了这段代码，无法实现，而且有关于parent的报错，可以具体说下括号内具体什么意思吗，前端小白一个，望大佬解答一下

(this.parent.parent.refs.appMainContent.refs.section)这个？parent是为了拿父组件，括号里这么写是我为了获取到要进行全屏的组件的，你看下你自己的组件路径，我也是小白，多交流吧~

好的非常感谢，我试一下

输入图片说明

大佬实现了吗，是咋实现的呀，我也遇到了这个问题

vue3 怎么实现呢

若依 / RuoYi-Vue

内容风险标识

评论 (13)

若依 / RuoYi-Vue .gitee-modal { width: 500px !important; }

内容风险标识