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>