1. 安裝element-plus及圖標(biāo)庫

# 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)

注冊(cè)圖標(biāo)組件

// main.ts

// 如果您正在使用CDN引入，請(qǐng)刪除下面一行。
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. 動(dòng)態(tài)菜單代碼

動(dòng)態(tài)引入圖標(biāo)代碼

<el-icon>
   <component  v-if="item.meta" :is="item.meta.icon"></component>
</el-icon>

完整代碼

<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    text-color="#fff"
    default-active="2"
    router
    class="el-menu-vertical-demo"
    :collapse="props.isCollapse"
    :ellipsis="false"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- <el-sub-menu index="/home">
      <template #title>
        <el-icon><location /></el-icon>
        <span>常用功能</span>
      </template>
        <el-menu-item index="/throttle">節(jié)流</el-menu-item>
        <el-menu-item index="/debounce">防抖</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item> -->
    <template v-for="item in menuRoutes" :key="item.id">
        <el-sub-menu  v-if="item.children && item.children.length > 0" :index="item.path">
          <template #title>
            <el-icon>
              <component  v-if="item.meta" :is="item.meta.icon"></component>
            </el-icon>
              <!-- <el-icon><location /></el-icon> -->
              <span v-if="item.meta">{{item.meta.title}}</span>
          </template>
          <!-- 二級(jí)菜單 -->
            <el-menu-item v-for="item2 in item.children" :key="item2.id" :index="item2.path" :style="item2.children?'display: none': null">
              {{item2.children? null : item2.meta.title}}
            </el-menu-item>
          <!-- 三級(jí)菜單 -->
            <el-sub-menu v-for="item2 in item.children.filter(x => x.children && x.children.length > 0)" :key="item2.id" class="child-sub-menu" :index="item2.path">
              <template #title>
                <!-- <component  v-if="item.meta" :is="item.meta.icon" style="width: 20px; height: 20px"></component> -->
                <!-- <el-icon><location /></el-icon> -->
                  <span v-if="item2.meta">{{item2.meta.title}}</span>
              </template>
              <el-menu-item v-for="item3 in item2.children" :key="item3.id" :index="item3.path">{{item3.meta.title}}</el-menu-item>
            </el-sub-menu>
          <!-- </template> -->
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">{{item.meta.title}}</el-menu-item>
    </template>
  </el-menu>
</template>

<script lang="ts" setup>
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)
})
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
<style lang="stylus" scoped>
.el-menu
  height: 100vh
  border-right: none
:deep(.el-sub-menu__title)
  height: 50px !important
</style>

路由如下文章來源地址http://www.zghlxwxcb.cn/news/detail-802734.html

export const menuRoutes: Array<RouteRecordRaw> = [
    {
        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: '節(jié)流',
                    icon: 'location'
                },
                component: () => import('@/views/adminsystem/throttle/index.vue')
            }
        ]
    }
]

到了這里，關(guān)于vue3 element-plus動(dòng)態(tài)菜單及動(dòng)態(tài)圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！