vue学习笔记 element-plus/icons-vue el-menu动态菜单(路由)

安装icon

npm install @element-plus/icons-vue

当前版本

  "dependencies": {
    "@element-plus/icons-vue": "^0.2.4",
    "core-js": "^3.8.3",
    "element-plus": "^1.3.0-beta.1",
    "node-sass": "^7.0.1",
    "sass-loader": "^12.4.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

路由中指定icon

const routes = [
  {
    path: "/",
    component: () => import("@/views/HomeView"),
    name: "Home",
    meta: { title: "首页", icon: "HomeFilled" },
  },
  {
    path: "/electricity",
    name: "Electricity",
    meta: { title: "电表", icon: "Box" },
    component: () => import("@/views/electricity/setting"),
  },
  {
    path: "/about",
    component: () => import("@/views/AboutView"),
    name: "About",
    meta: { title: "系统管理", icon: "Tools" },
  },
];

全局注册icon

import * as ElIconModules from "@element-plus/icons-vue";
Object.keys(ElIconModules).forEach(function (key) {
  app.component(ElIconModules[key].name, ElIconModules[key]);
});

示例

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";

import * as ElIconModules from "@element-plus/icons-vue";

import "@/styles/index.scss";

const app = createApp(App);
app.use(store);
app.use(router);
app.use(ElementPlus);

Object.keys(ElIconModules).forEach(function (key) {
  app.component(ElIconModules[key].name, ElIconModules[key]);
});

app.mount("#app");

图标使用方法

<el-icon>
    <component :is="route.meta.icon" />
el-icon>

菜单示例

      <el-menu router :default-active="$route.path">
        <el-menu-item
          v-for="route in routes"
          :key="route.path"
          :index="route.path"
        >
          <template #title>
            <el-icon>
              <component :is="route.meta.icon" />
            el-icon>
            
            <span>{{ route.meta.title }}span>template
          >
        el-menu-item>
      el-menu>

效果图