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

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

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

增加顶导菜单

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

<template>
  <div class="topmenu">
    <el-row>
      <el-col :span="8" class="logo-container">
        <span class="title">ViaBTC 后台管理系统</span>
      </el-col>
      <el-col :span="16" class="menu">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#324057"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">
              <a href="#/components/split-pane">分割线</a>
            </el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4">
            <a href="https://www.ele.me" target="_blank">订单管理</a>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  computed: {
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      console.log(this.permission_routes)
    },
  }
}
</script>

<style lang="scss" scoped>
.topmenu {
  width: 100%;
  height: 62px;
  min-width: 600px;
  background: #324057;
  color: #fff;
  border-bottom: 1px solid #1f2d3d;

  .logo-container {
    line-height: 60px;
    min-width: 200px;

    .logo {
      height: 50px;
      width: 50px;
      margin-right: 5px;
      vertical-align: middle;
      display: inline-block;
    }

    .title {
      vertical-align: middle;
      font-size: 18px;
      font-family: "Microsoft YaHei";
      letter-spacing: 3px;
    }
  }

  .menu {
    .el-submenu {
      // 这个用于保持一级菜单之间的间距
      padding: 0 20px;
    }
  }
}
</style>

在 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;
    }
  }

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