Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单

1、安装图标库

npm install @element-plus/icons

2、注册

main.ts文件中引入并注册

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app = createApp(App) for (const name in ElIcons){ app.component(name,(ElIcons as any)[name]) } app.use(ElementPlus).mount('#app')

3、在组件中直接使用

// 结合按钮使用 <el-button type="primary" icon="Edit" >编辑</el-button> <el-button size="mini" type="primary" class="inline-block" icon="More" title="详情" @click="handleDetail(row.id)" /> // 结合el-icon使用 <el-icon> <delete /> </el-icon>

4、在el-menu组件中动态使用

如果想在渲染菜单时动态使用icon图标，需要使用动态组件，举个栗子：

// 路由文件 export const routes: Array<RouteRecordRaw> = [ { path: '/', component: Layout, redirect: 'home', children: [ { path: '/home', component: () => import('@/views/Home.vue'), name: 'Home', meta: { title: '首页', icon: 'HomeFilled' }, }, ], }, ] // 使用el-menu的文件 <template> <div> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu router :default-active="activeMenu" @open="handleOpen" @close="handleClose" > <template v-for="route in menuList" :key="route.path"> <el-menu-item v-if="!route.children" :index="route.path"> <el-icon> <component :is="route.meta.icon" /> </el-icon> <span>{{ route.meta.title }}</span> </el-menu-item> <el-sub-menu v-else :index="route.path"> <template #title> <el-icon> <component :is="route.meta.icon" /> </el-icon> <span>{{ route.meta.title }}</span> </template> <el-menu-item v-for="subRoute in route.children" :key="subRoute.path" :index="subRoute.path" > <el-icon> <component :is="subRoute.meta.icon" /> </el-icon> <span>{{ subRoute.meta.title }}</span> </el-menu-item> </el-sub-menu> </template> </el-menu> </el-scrollbar> </div> </template> <script lang="ts"> import { defineComponent, computed } from 'vue' import { useRoute } from 'vue-router' import { routes } from '@/router/index' export default defineComponent({ setup() { const route = useRoute() const activeMenu = computed(() => { const { meta, path } = route if (meta.activeMenu) { return meta.activeMenu } return path }) const menuList = computed( () => (routes as any).find((item: any) => item.path === '/').children ) return { activeMenu, menuList } }, }) </script>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。