后台管理菜单图标

使用饿了么UI中Icon 图标组件

1，注册全局组件

在src/components/index.ts文件中注册全局组件

import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue'
// 引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const components: { [name: string]: Component } = { SvgIcon }
// 对外暴露插件对象
export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key])
    });
    // 将element提供的组件注册为全局组件
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
  },
}

mian.ts中会引入使用

// 注册全部组件为全局组件
import gloablComponent from './components/index'
// 引入路由
import router from './router'
// 获取实例对象
const app = createApp(App)
// 注册svg为全局组件
// import SvgIcon from '@/components/SvgIcon/index.vue'
// app.component('SvgIcon', SvgIcon)
app.use(gloablComponent)

2，这时，全局都可以使用icon,在路由原信息中添加icon字段

  {
    // 登录
    path: '/login',
    component: () => import('@/views/login/index.vue'),
    name: 'login', //明名路由
    meta:{
      title:'登录', //菜单标题
      hidden: false,  //代表路由标题在菜单中是否隐藏 true：隐藏 false:不隐藏
      icon:'Avatar', //菜单文字左侧图标，支持element-plus全部图标
    }
  },

3，在菜单组件在使用 src/layout/menu/index.vue（菜单组件源码见上一篇文章）