<template> <div :class="{ 'has-logo': showLogo }"> <el-menu :default-active="activeMenu" :unique-opened="false" :collapse-transition="false" mode="horizontal" :background-color="variables.menuBg" :text-color="variables.menuText" :active-text-color="variables.menuActiveText" class="frame-menu" > <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" ref="list" /> </el-menu> </div> </template> <script> import { mapGetters } from 'vuex' import Logo from './Logo' import SidebarItem from './SidebarItem' import variables from '@/styles/variables.scss' export default { components: { SidebarItem, Logo }, computed: { ...mapGetters([ 'sidebar' ]), routes() { console.log('routes',this.$store.state.permission.routes) return this.$store.state.permission.routes }, activeMenu() { const route = this.$route; const { meta, path } = route; // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu; } return path; }, showLogo() { return this.$store.state.settings.sidebarLogo }, variables() { return variables }, } } </script> <style lang="scss" scoped> .frame-menu { padding-left: 30px; border: none; height: 56px; width: 100% !important; white-space: nowrap; &.el-menu--horizontal { border-bottom: none !important; display: flex; > .menu-wrapper { // display: inline-block; > a { // display: inline-block; > .el-menu-item { display: inline-block; margin: 0; border-bottom: 2px solid transparent; padding: 0 5px; } } > .el-submenu { display: inline-block; .el-submenu__title { border-bottom: 2px solid transparent; } .el-submenu__icon-arrow { position: static; vertical-align: middle; margin-left: 8px; margin-top: -3px; } } } } } </style>