16.左侧导航菜单制作

左侧导航菜单制作

1. 修改路由，方便查看页面

index.ts

import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
import Layout from '@/layout/Index.vue'

const routes: Array = [
    {
        path: '/',
        name: 'home',
        component: Layout
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

2. 官网

https://element-plus.org/zh-CN/component/menu.html

3. 在Layout中新建Menu.vue

3.1代码如下

  
    expand
    collapse
  
  
    
      
        
        Navigator One
      
      
        Group One
        item one
        item two
      
      
        item three
      
      
        item four
        item one
      
    
    
      
      Navigator Two
    
    
      
      Navigator Three
    
    
      
      Navigator Four
    
  





.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

3.2 效果图

3.3 修改样式

  

    
    
      |||
      |||
    
    
      
        
        Navigator One
      
      
        Group One
        item one
        item two
      
      
        item three
      
      
        item four
        item one
      
    
    
      
      Navigator Two
    
    
      
      Navigator Three
    
    
      
      Navigator Four
    
  





.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
.el-menu {
  border-right: none;
}

//主菜单颜色
:deep(.el-sub-menu .el-sub-menu__title){
	 color: #f5f4f4 !important;
}

/*子菜单文字颜色*/
:deep(.el-menu .el-menu-item){
	color: #e1e5ea;
}
/* 菜单点中文字的颜色 */

:deep(.el-menu-item.is-active){
	color: #f07810 !important;
}
/* 当前打开菜单的所有子菜单颜色 */

:deep(.is-opened .el-menu-item){
	background-color: #082343 !important;
}
/* 鼠标移动菜单的颜色 */

:deep(.el-menu-item:hover){
	background-color: #001528 !important;
}

3.4 效果图

4. 在Layout中新建MenuItem.vue

4.1 代码如下

    
        
         0" :index="menu.path">
            
                
                    
                    
                
                {{ menu.meta.title }}
            
            
            
        
        
            
                
            
            
                {{ menu.meta.title }}
            
        
    

知识点补充

component是vue内置组件，主要作用为动态渲染组件，基本用法如下：

官网：动态组件 & 异步组件 | Vue.js (vueframework.com)

4.2 Menu.vue修改

  
  

    
    
      |||
      |||
    
    
    
  





.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
.el-menu {
  border-right: none;
}



//主菜单颜色
:deep(.el-sub-menu .el-sub-menu__title){
	 color: #f5f4f4 !important;
}

/*子菜单文字颜色*/
:deep(.el-menu .el-menu-item){
	color: #e1e5ea;
}
/* 菜单点中文字的颜色 */

:deep(.el-menu-item.is-active){
	color: #f07810 !important;
}
/* 当前打开菜单的所有子菜单颜色 */

:deep(.is-opened .el-menu-item){
	background-color: #082343 !important;
}
/* 鼠标移动菜单的颜色 */

:deep(.el-menu-item:hover){
	background-color: #001528 !important;
}

4.3 在index.vue中引入

    
        
            
        
        
            Header
            Main
        
    





.mycontainer{
    height: 100%;
    .asside{
        background-color: #0a2542;
        // 使宽度自适应
        width: auto;
    }
    .header{
        background-color: rgb(164, 194, 255);
    }
    .mymain{
        background-color: rgb(242, 187, 136);
    }
}

5. 最终效果