Vue3中element-plus全局使用Icon图标的过程详解
更新时间:2022年01月21日 10:41:24 作者:yuliwen0418
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
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>
总结
到此这篇关于Vue3中element-plus全局使用Icon图标的文章就介绍到这了,更多相关Vue3 element-plus全局使用Icon图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
这篇文章主要介绍了vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11ant-design-vue中的select选择器,对输入值的进行筛选操作
这篇文章主要介绍了ant-design-vue中的select选择器,对输入值的进行筛选操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10VUE中的export default和export使用方法解析
export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但是,在一个文件或模块中export,import可以有多个,export default却只能有一个。2022-12-12el-table表格动态合并相同数据单元格(可指定列+自定义合并)
工作时遇到的el-table合并单元格的需求,本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论