vue使用element-ui组件,
我们在用某视频剪辑软件开发网站的时候，往往图标是起着很重要的作，这篇文章主要给大家介绍了关于Vue3中元素加全局使用图标图标的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
1、安装图标库2、注册3、在组件中直接使用4、在埃尔菜单组件中动态使用总结某视频剪辑软件项目中使用元素加的图标图标，包括按钮和动态菜单
1、安装图标库
新公共管理安装@ element-plus/图标
2、注册
主页面文件中引入并注册
从“vue”导入{ createApp }
从导入应用程序 App.vue
从“元素加”导入ElementPlus
从" @element-plus/icons "导入*作为图标
const app=createApp(App)
对于(elicon中的常量名称){
应用程序组件(名称，(如有图标)[名称])
}
app.use(ElementPlus).挂载(#应用程序)
3、在组件中直接使用
//结合按钮使用
埃尔按钮类型=主要图标=编辑编辑/el-button
埃尔按钮
size=mini
type=primary
class=内联块
icon=更多
title=详情
@click=handleDetail(row.id)
/
//结合埃尔图标使用
埃尔图标
删除/
/el-icon
4、在el-menu组件中动态使用
如果想在渲染菜单时动态使用图标图标，需要使用动态组件，举个栗子：
//路由文件
导出常量路由：ArrayRouteRecordRaw=[
{
路径："/",
组件：布局，
重定向："主页",
儿童：[
{
路径："/home "，
组件：()=import(@/views/Home.vue )，
姓名：家，
元：{标题： 首页，icon: HomeFilled }，
},
],
},
]
//使用埃尔菜单的文件
模板
差异
El-滚动条wrap-class=" scroll bar-wrapper "
埃尔菜单
路由器
:default-active=activeMenu
@open=handleOpen
@close=handleClose
模板v-for= route in menuList :key= route。路径
el-menu-item v-if=！路线。 children :index= route。路径
埃尔图标
组件：is=route.meta.icon /
/el-icon
span{{ route.meta.title }}/span
/El-菜单项
埃尔-子菜单v-else :index=route.path
模板#标题
埃尔图标
组件：is=route.meta.icon /
/el-icon
span{{ route.meta.title }}/span
/模板
埃尔-菜单项
v-for=路线。孩子们中的子路由
:key=subRoute.path
:index=subRoute.path
埃尔图标
组件：is=subRoute.meta.icon /
/el-icon
span { { subroute。meta。title } }/span
/El-菜单项
/El-子菜单
/模板
/el-menu
/El-滚动条
/div
/模板
脚本语言
从“vue”导入{ defineComponent，已计算}
从“vue路由器"导入{ useRoute }
从" @/路由器/索引"导入{路线}
导出默认定义组件({
setup() {
const route=useRoute()
const activeMenu=computed(()={
const { meta，path }=route
if (meta.activeMenu) {
返回meta.activeMenu
}
返回路径
})
const menuList=computed(
()=(任意路线)。find((item: any)=item.path===/).孩子们
)
返回{ activeMenu，menuList }
},
})
/脚本
总结
到此这篇关于Vue3中元素加全局使用图标图标的文章就介绍到这了，更多相关Vue3元素-还有全局使用图标图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。