Vue Element Admin 设置顶部导航并隐藏侧边栏

Vue Element Admin 可能是使用最广泛的后台管理前端框架了，虽然技术栈已经老了（Vue 2.0 全家桶 + npm8），但社区依旧活跃。

目前有个项目，需要把侧边栏导航换成顶导，框架官方是不支持的，调研以后，决定自己写一个顶导，隐藏现有的侧边栏。

增加顶导菜单

在 src/layout/components下，新建一个文件 TopMenu.vue：

在 src/layout/components/index.js中，import TopMenu：

...
export { default as TopMenu } from './TopMenu'

注意：这里按照惯例，虽然组件本身在js中是 CamelCase 的，但在 template 中，要写成 kebab-case 模式

隐藏侧边栏

Sidebar 是框架的原始左导菜单，源码在src/layout/components/Sidebar里，但修改这里的样式是不行的，需要修改src/styles/sidebar.scss文件：

  .main-container {
    ...
    margin-left: 0px; //之前整个页面给side留出的边距
    ...
  }

  .sidebar-container {
    ...
    // 新增以下几行，彻底隐藏 Sidebar
    pointer-events: none;
    transition-duration: 0.3s;
    transform: translate3d(-$sideBarWidth, 0, 0);
  }
...

  .hideSidebar {
    .sidebar-container {
      ...
      // 新增以下几行，彻底隐藏 Sidebar
      pointer-events: none;
      transition-duration: 0.3s;
      transform: translate3d(-$sideBarWidth, 0, 0);
    }

    .main-container {
      margin-left: 0px;
    }
  }

至此，已经完成了顶导的添加和侧边栏的隐藏。当然这个顶导是静态的，如果需要像侧边栏那样根据路由变化，还要进一步编码。