vue-element-admin 隐藏侧边栏

最新推荐文章于 2023-06-02 11:26:29 发布

原创最新推荐文章于 2023-06-02 11:26:29 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

vue-element-admin 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue项目中如何通过修改`src/style/sidebar.scss`和`src/layout/components/index.js`文件来隐藏侧边栏，以及解决由此产生的电脑端空白显示问题。通过注释掉`index.js`中的侧边栏导入，实现了侧边栏的彻底隐藏，调整了主要内容区域的布局。

参考https://blog.youkuaiyun.com/weixin_48508049/article/details/114018306

在 src/style/sidebar.scss 里搜索hideSidebar找到以下部分

.hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }
    .main-container {
      margin-left: 54px;
    }

修改为

.sidebar-container {
      width: 54px !important;
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sideBarWidth, 0, 0);
    }
    .main-container {
      margin-left: 0px;
    }

此时电脑端侧边栏位置会显示一块空白部分

解决办法

在 src\layout\components\index.js 里注释掉侧边栏部分

export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
// export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'

侧边栏彻底隐藏成功