devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-element-admin实现顶部菜单栏，并可互相切换_vue 顶部菜单

作者：Li_阴宅 | 2024-07-01 20:51:30

赞

踩

vue 顶部菜单

目录

零、先上传效果图

一、配置顶部菜单

二、配置右侧切换菜单位置按钮

三、配置index.vue和Navbar.vue

零、先上传效果图

 一、配置顶部菜单

1.复制一份src/layout/componets/Sidebar所有文件至同级目录，改名为Headbar，并在src/layout/components/index.js中声明Headbar

声明Headbar

2.修改Headbar/index.vue文件内容，主要删除了logo和更改了el-menu的mode属性为horizontal,并将name更改为Headbar；

  1. <template>
  2.   <el-scrollbar wrap-class="scrollbar-wrapper">
  3.     <el-menu
  4.       :default-active="activeMenu"
  5.       :background-color="variables.menuBg"
  6.       :text-color="variables.menuText"
  7.       :active-text-color="variables.menuActiveText"
  8.       mode="horizontal">
  9.  
  10.       <sidebar-item
  11.         v-for="route in permission_routes"
  12.         :key="route.path"
  13.         :item="route"
  14.         :base-path="route.path"/>
  15.     </el-menu>
  16.   </el-scrollbar>
  17.  
  18. </template>
  19.  
  20. <script>
  21.   import {mapGetters} from 'vuex'
  22.   import SidebarItem from './SidebarItem'
  23.   import variables from '@/styles/variables.scss'
  24.  
  25.   export default {
  26.     name: 'Headbar',
  27.     components: {SidebarItem},
  28.     computed: {
  29.       ...mapGetters([
  30.         'permission_routes',
  31.         'sidebar'
  32.       ]),
  33.       activeMenu() {
  34.         const route = this.$route
  35.         const {meta, path} = route
  36.         // if set path, the sidebar will highlight the path you set
  37.         if (meta.activeMenu) {
  38.           return meta.activeMenu
  39.         }
  40.         return path
  41.       },
  42.       showLogo() {
  43.         return this.$store.state.settings.sidebarLogo
  44.       },
  45.       variables() {
  46.         return variables
  47.       },
  48.       isCollapse() {
  49.         return !this.sidebar.opened
  50.       }
  51.     }
  52.   }
  53. </script>

 3.修改Headbar/SidebarItem.vue文件内容，主要配置stype、删除icon、增加固定宽度；

  1. <template>
  2.   <!-- style设置为inline-block，避免垂直布局的标题-->
  3.   <div v-if="!item.hidden" style="display:inline-block;">
  4.     <template
  5.       v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
  6.       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
  7.         <el-menu-item :index="resolvePath(onlyOneChild.path)">
  8.           <item :title="generateTitle(onlyOneChild.meta.title)"/>
  9.         </el-menu-item>
  10.       </app-link>
  11.     </template>
  12.  
  13.       <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" >
  14.         <template slot="title">
  15.           <item v-if="item.meta" :title="generateTitle(item.meta.title)"/>
  16.           <!-- 增加固定宽度防止箭头被遮挡-->
  17.           <div style="display: inline-block; width:20px;"></div>
  18.         </template>
  19.  
  20.         <sidebar-item
  21.           v-for="child in item.children"
  22.           :key="child.path"
  23.           :is-nest="true"
  24.           :item="child"
  25.           :base-path="resolvePath(child.path)"
  26.           class="nest-menu"
  27.         />
  28.       </el-submenu>
  29.  
  30.  
  31.   </div>
  32. </template>
  33.  
  34. <script>
  35.   import path from 'path'
  36.   import {generateTitle} from '@/utils/i18n'
  37.   import {isExternal} from '@/utils/validate'
  38.   import Item from './Item'
  39.   import AppLink from './Link'
  40.   import FixiOSBug from './FixiOSBug'
  41.   import SidebarItem from "./SidebarItem";
  42.  
  43.   export default {
  44.     name: 'SidebarItem',
  45.     components: {Item, AppLink, SidebarItem},
  46.     mixins: [FixiOSBug],
  47.     props: {
  48.       // route object
  49.       item: {
  50.         type: Object,
  51.         required: true
  52.       },
  53.       isNest: {
  54.         type: Boolean,
  55.         default: false
  56.       },
  57.       basePath: {
  58.         type: String,
  59.         default: ''
  60.       }
  61.     },
  62.     data() {
  63.       // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
  64.       // TODO: refactor with render function
  65.       this.onlyOneChild = null
  66.       return {}
  67.     },
  68.     methods: {
  69.       hasOneShowingChild(children = [], parent) {
  70.         const showingChildren = children.filter(item => {
  71.           if (item.hidden) {
  72.             return false
  73.           } else {
  74.             // Temp set(will be used if only has one showing child)
  75.             this.onlyOneChild = item
  76.             return true
  77.           }
  78.         })
  79.  
  80.         // When there is only one child router, the child router is displayed by default
  81.         if (showingChildren.length === 1) {
  82.           return true
  83.         }
  84.  
  85.         // Show parent if there are no child router to display
  86.         if (showingChildren.length === 0) {
  87.           this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
  88.           return true
  89.         }
  90.  
  91.         return false
  92.       },
  93.       resolvePath(routePath) {
  94.         if (isExternal(routePath)) {
  95.           return routePath
  96.         }
  97.         if (isExternal(this.basePath)) {
  98.           return this.basePath
  99.         }
  100.         return path.resolve(this.basePath, routePath)
  101.       },
  102.  
  103.       generateTitle
  104.     }
  105.   }
  106. </script>

二、配置右侧切换菜单位置按钮

1.在src/settings.js中增加menuInLeft 

 2.在右侧边栏中增加切换按钮，src/layout/components/Settings/index.vue

  1. <template>
  2.   <div class="drawer-container">
  3.     <div>
  4.       <!--原有标签保持不变，此处省略-->
  5.  
  6.       <!--增加切换按钮-->
  7.       <div class="drawer-item">
  8.         <span>切换菜单位置</span>
  9.         <el-switch v-model="menuInLeft" class="drawer-switch" />
  10.       </div>
  11.  
  12.     </div>
  13.   </div>
  14. </template>
  15.  
  16. <script>
  17. import ThemePicker from '@/components/ThemePicker'
  18.  
  19. export default {
  20.   components: { ThemePicker },
  21.   data() {
  22.     return {}
  23.   },
  24.   computed: {
  25.     //  ===原有参数保持不变，此处省略====
  26.     
  27.     // 增加绑定的menuInLeft值
  28.     menuInLeft: {
  29.       get() {
  30.         return this.$store.state.settings.menuInLeft
  31.       },
  32.       set(val) {
  33.         this.$store.dispatch('settings/changeSetting', {
  34.           key: 'menuInLeft',
  35.           value: val
  36.         })
  37.       }
  38.     },
  39.   },
  40.   methods: {
  41.     themeChange(val) {
  42.       this.$store.dispatch('settings/changeSetting', {
  43.         key: 'theme',
  44.         value: val
  45.       })
  46.     }
  47.   }
  48. }
  49. </script>
  50.  
  51. <style lang="scss" scoped>
  52. /*原有样式保持不变，此处省略*/
  53. </style>

3.引入menuInLeft，src/store/modules/settings.js

三、配置index.vue和Navbar.vue

1.配置index.vue（src/layout/inex.vue）

  1. <template>
  2.   <div :class="classObj" class="app-wrapper">
  3.  
  4.     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
  5.  
  6.     <!--当 menuInLeft===true，左菜单栏显示,顶部隐藏-->
  7.     <sidebar class="sidebar-container" v-if="menuInLeft"/>
  8.  
  9.     <!--当左菜单栏显示时，需配置main-container 样式，改样式位置在src/styles/sidebar.scss文件中-->
  10.     <div :class="{hasTagsView:needTagsView,'main-container':menuInLeft}">
  11.       <div :class="{'fixed-header':fixedHeader}">
  12.  
  13.         <navbar/>
  14.  
  15.         <!--当 menuInLeft===false，左菜单栏隐藏，顶部显示-->
  16.         <headbar v-if="!menuInLeft"/>
  17.  
  18.         <tags-view v-if="needTagsView"/>
  19.       </div>
  20.  
  21.       <app-main/>
  22.  
  23.       <right-panel v-if="showSettings">
  24.         <settings/>
  25.       </right-panel>
  26.     </div>
  27.   </div>
  28.  
  29. </template>
  30.  
  31. <script>
  32.   import RightPanel from '@/components/RightPanel'
  33.   //引入Sidebar
  34.   import {AppMain, Navbar, Settings, Headbar, Sidebar, TagsView} from './components'
  35.   import ResizeMixin from './mixin/ResizeHandler'
  36.   import {mapState} from 'vuex'
  37.  
  38.   export default {
  39.     name: 'Layout',
  40.     components: {
  41.       AppMain,
  42.       Navbar,
  43.       RightPanel,
  44.       Settings,
  45.       Sidebar,//引入Sidebar
  46.       Headbar,
  47.       TagsView
  48.     },
  49.     mixins: [ResizeMixin],
  50.     computed: {
  51.       ...mapState({
  52.         sidebar: state => state.app.sidebar,
  53.         device: state => state.app.device,
  54.         showSettings: state => state.settings.showSettings,
  55.         needTagsView: state => state.settings.tagsView,
  56.         fixedHeader: state => state.settings.fixedHeader,
  57.         //获取menuInLeft值
  58.         menuInLeft: state => state.settings.menuInLeft
  59.       }),
  60.       classObj() {
  61.         return {
  62.           hideSidebar: !this.sidebar.opened,
  63.           openSidebar: this.sidebar.opened,
  64.           withoutAnimation: this.sidebar.withoutAnimation,
  65.           mobile: this.device === 'mobile'
  66.         }
  67.       }
  68.     },
  69.     methods: {
  70.       handleClickOutside() {
  71.         this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})
  72.       }
  73.     }
  74.   }
  75. </script>

 2、配置Navbar.vue（src/layout/components/Navbar.vue）

  1. <template>
  2.   <div class="navbar">
  3.     <!--注释 侧边栏展开关闭按钮-->
  4.     <hamburger v-if="menuInLeft"
  5.                id="hamburger-container"
  6.                :is-active="sidebar.opened"
  7.                class="hamburger-container"
  8.                @toggleClick="toggleSideBar"/>
  9.  
  10.     <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
  11.  
  12.     <div class="right-menu">
  13.  
  14.       <template v-if="device!=='mobile'">
  15.         <search id="header-search" class="right-menu-item"/>
  16.  
  17.         <error-log class="errLog-container right-menu-item hover-effect"/>
  18.  
  19.         <screenfull id="screenfull" class="right-menu-item hover-effect"/>
  20.  
  21.         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
  22.           <size-select id="size-select" class="right-menu-item hover-effect"/>
  23.         </el-tooltip>
  24.  
  25.         <lang-select class="right-menu-item hover-effect"/>
  26.  
  27.       </template>
  28.  
  29.       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
  30.         <div class="avatar-wrapper">
  31.           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
  32.           <i class="el-icon-caret-bottom"/>
  33.         </div>
  34.         <el-dropdown-menu slot="dropdown">
  35.           <router-link to="/profile/index">
  36.             <el-dropdown-item>
  37.               {{ $t('navbar.profile') }}
  38.             </el-dropdown-item>
  39.           </router-link>
  40.           <router-link to="/">
  41.             <el-dropdown-item>
  42.               {{ $t('navbar.dashboard') }}
  43.             </el-dropdown-item>
  44.           </router-link>
  45.           <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
  46.             <el-dropdown-item>
  47.               {{ $t('navbar.github') }}
  48.             </el-dropdown-item>
  49.           </a>
  50.           <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
  51.             <el-dropdown-item>Docs</el-dropdown-item>
  52.           </a>
  53.           <el-dropdown-item divided @click.native="logout">
  54.             <span style="display:block;">{{ $t('navbar.logOut') }}</span>
  55.           </el-dropdown-item>
  56.         </el-dropdown-menu>
  57.       </el-dropdown>
  58.     </div>
  59.  
  60.   </div>
  61. </template>
  62.  
  63. <script>
  64.   import {mapGetters, mapState} from 'vuex'
  65.   import Breadcrumb from '@/components/Breadcrumb'
  66.   import Hamburger from '@/components/Hamburger'
  67.   import ErrorLog from '@/components/ErrorLog'
  68.   import Screenfull from '@/components/Screenfull'
  69.   import SizeSelect from '@/components/SizeSelect'
  70.   import LangSelect from '@/components/LangSelect'
  71.   import Search from '@/components/HeaderSearch'
  72.  
  73.   export default {
  74.     components: {
  75.       Breadcrumb,
  76.       Hamburger,
  77.       ErrorLog,
  78.       Screenfull,
  79.       SizeSelect,
  80.       LangSelect,
  81.       Search,
  82.     },
  83.     computed: {
  84.       ...mapGetters([
  85.         'sidebar',
  86.         'avatar',
  87.         'device'
  88.       ]),
  89.       ...mapState({
  90.         menuInLeft: state => state.settings.menuInLeft
  91.       }),
  92.     },
  93.     methods: {
  94.       toggleSideBar() {
  95.         this.$store.dispatch('app/toggleSideBar')
  96.       },
  97.       async logout() {
  98.         await this.$store.dispatch('user/logout')
  99.         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
  100.       }
  101.     }
  102.   }
  103. </script>
  104.  
  105. <style lang="scss" scoped>
  106.   .navbar {
  107.     height: 50px;
  108.     overflow: hidden;
  109.     position: relative;
  110.     background: #fff;
  111.     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  112.  
  113.     .hamburger-container {
  114.       line-height: 46px;
  115.       height: 100%;
  116.       float: left;
  117.       cursor: pointer;
  118.       transition: background .3s;
  119.       -webkit-tap-highlight-color: transparent;
  120.  
  121.       &:hover {
  122.         background: rgba(0, 0, 0, .025)
  123.       }
  124.     }
  125.  
  126.     .breadcrumb-container {
  127.       float: left;
  128.     }
  129.  
  130.     .errLog-container {
  131.       display: inline-block;
  132.       vertical-align: top;
  133.     }
  134.  
  135.     .right-menu {
  136.       float: right;
  137.       height: 100%;
  138.       line-height: 50px;
  139.  
  140.       &:focus {
  141.         outline: none;
  142.       }
  143.  
  144.       .right-menu-item {
  145.         display: inline-block;
  146.         padding: 0 8px;
  147.         height: 100%;
  148.         font-size: 18px;
  149.         color: #5a5e66;
  150.         vertical-align: text-bottom;
  151.  
  152.         &.hover-effect {
  153.           cursor: pointer;
  154.           transition: background .3s;
  155.  
  156.           &:hover {
  157.             background: rgba(0, 0, 0, .025)
  158.           }
  159.         }
  160.       }
  161.  
  162.       .avatar-container {
  163.         margin-right: 30px;
  164.  
  165.         .avatar-wrapper {
  166.           margin-top: 5px;
  167.           position: relative;
  168.  
  169.           .user-avatar {
  170.             cursor: pointer;
  171.             width: 40px;
  172.             height: 40px;
  173.             border-radius: 10px;
  174.           }
  175.  
  176.           .el-icon-caret-bottom {
  177.             cursor: pointer;
  178.             position: absolute;
  179.             right: -20px;
  180.             top: 25px;
  181.             font-size: 12px;
  182.           }
  183.         }
  184.       }
  185.     }
  186.   }
  187. </style>

-----------------------------------------------------------分割线-------------------------------------------------------------

说明：

上面文章中用的是vue-element-amdin的，i18n版本(增加了多语言功能)，generateTitle方法是原项目默认的，在代码的import位置进行了引用。

评论中的百度云源代码使用的是项目的master版本，里面没有generateTitle。

-----------------------------------------------------------分割线-------------------------------------------------------------

四、将顶部菜单放入到navbar中

        

 直接在layout/components/Navbar.vue中引入 headbar，并加入headbar标签即可。效果如下：

 由于顶部位置有限，在菜单过多时，会存在放不下的情况。代码中为了将位置空出来，我把breadrumb标签进行了隐藏，不过还是没有放下…………

最好的解决方式是让顶部菜单能够左右滑动，目前还没有去调试加上，先进行记录一下， 后面调试出来了再加。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/777641
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号