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

最新推荐文章于 2024-05-17 21:44:10 发布

xjcwzp

最新推荐文章于 2024-05-17 21:44:10 发布

阅读量3.4k

点赞数 3

分类专栏： Vue 文章标签： vue.js element-plus icons-vue

本文链接：https://blog.csdn.net/xjcwzp/article/details/122360442

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

安装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>
            <!-- <i :class="route.meta.icon"></i> -->
            <span>{{ route.meta.title }}</span></template
          >
        </el-menu-item>
      </el-menu>