Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）

1、安装包

# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue

2、全局注册

import { createApp } from 'vue';
// 引入 element-plus UI框架
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ELIcons from '@element-plus/icons-vue';
import App from './App.vue';const app = createApp(App);
for (const name in ELIcons) {app.component(name, (ELIcons as any)[name]);
}
app.use(ElementPlus).mount('#app');

3、在组件中使用

<el-icon :size="20"><edit />
</el-icon>
// 按钮中使用
<el-button type="primary" :icon="Edit"></el-button>

4、动态路由菜单图标

// router 路由文件
export const constantRoutes: Array<RouteRecordRaw> = [{path: '/',component: layout,redirect: '/home',meta: {title: '首页',icon: 'home-filled',},children: [{path: '/home',name: '首页',component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),},],},
]

// 在用到 el-menu的文件中
<el-menu-item :key="item.path" :index="item.path" :route="item.path"><el-icon><component :is="item.meta.icon" /></el-icon><template #title>{{ item.meta.title }}</template>
</el-menu-item>

Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）相关推荐

Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
Element(3) 使用v-org-tree组件实现组织树形菜单
一.前言 iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单,下面小编来提供一下在element-ui中的使用教程小编集成了el-dropdown下拉菜单(鼠标 ...
基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
通过json配置生成form表单，vue3+ts+elementPlus，form表单组件封
子组件 //src\components\form\index.vue <script setup lang="ts"> import { PropType, ref, ...
Vue3+TS项目中element-plus自动导入组件后，找不到文件
问题原因从报错代码来看,这是一个ts错误,而且是找不到名称是没有将*.d.ts文件加入到tsconfig.json配置文件中,所以Typescript还不认识它们解决 //找到项目根目录下 t ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
element label动态赋值_浅析 vuerouter 源码和动态路由权限分配
背景上月立过一个 flag,看完 vue-router 的源码,可到后面逐渐发现 vue-router 的源码并不是像很多总结的文章那么容易理解,阅读过你就会发现里面的很多地方都会有多层的函数调用关 ...

Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）

1、安装包

2、全局注册

3、在组件中使用

4、动态路由菜单图标

Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）相关推荐

最新文章

热门文章