vue3 element-plus动态菜单及动态图标

1. 安装element-plus及图标库

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue


# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2.全局引入

引入element-plus

//引入element-plus
import ElementPlus from 'element-plus'
const app = createApp(App)
app.use(ElementPlus)

注册图标组件

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3. 动态菜单代码

动态引入图标代码

完整代码

  
    <!-- 
      
        
        常用功能
      
        节流
        防抖
    
    
      
      Navigator Two
    
    
      
      Navigator Three
    
    
      
      Navigator Four
     -->
    
         0" :index="item.path">
          
            
              
            
              <!--  -->
              {{item.meta.title}}
          
          
            
              {{item2.children? null : item2.meta.title}}
            
          
             x.children && x.children.length > 0)" :key="item2.id"  :index="item2.path">
              
                <!--  -->
                <!--  -->
                  {{item2.meta.title}}
              
              {{item3.meta.title}}
            
          <!--  -->
        
        {{item.meta.title}}
    
  



import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { menuRoutes } from '@/router/index'
const router = useRouter()
const props = defineProps({
  isCollapse: {
		type: Boolean,
		default: false,
  }
})
const emits = defineEmits(['menuChange'])
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
onMounted(() => {
    console.log(router.options.routes)
})



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


.el-menu
  height: 100vh
  border-right: none
:deep(.el-sub-menu__title)
  height: 50px !important

路由如下

export const menuRoutes: Array = [
    {
        path: '/adminHome',
        name: 'adminHome',
        meta: {
            title: '常用功能',
            icon: 'location'
        },
        component: () => import('@/views/adminHome.vue'),
        children: [
            {
                path: '/debounce',
                name: 'debounce',
                meta: {
                    title: '防抖',
                    icon: 'location'
                },
                component: () => import('@/views/adminsystem/debounce/index.vue')
            },
            {
                path: '/throttle',
                name: 'throttle',
                meta: {
                    title: '节流',
                    icon: 'location'
                },
                component: () => import('@/views/adminsystem/throttle/index.vue')
            }
        ]
    }
]