<el-icon> <Fold /> </el-icon> 动态Icon 的使用方式 方式一 // 在main.ts注册Icon组件import*asIconsfrom'@element-plus/icons'constapp =createApp(App)Object.keys(Icons).forEach((key) =>{ app.componet(key,Icons[keyaskeyoftypeofIcons])// app.componet(key, Icons[key]) 等价于上面这行}) ...
//main.ts文件import*asElIconModulesfrom'@element-plus/icons'constapp=createApp(App)// 统一注册Icon图标for(consticonNameinElIconModules){if(Reflect.has(ElIconModules,iconName)){constitem=ElIconModules[iconName]app.component(iconName,item)}}// 页面内容直接官网示例直接使用<el-iconcolor="#409EFC"...
<el-icon @click="handleCollapse"><component :is="Fold" v-if="isCollapse"></component><component :is="Expand" v-else></component></el-icon> Script中一定要引入你的icon才可以 import {House,Menu,Fold} from '@element-plus/icons-vue' 定义一个isCollapse判断显不显示,this顺序很重要,有时候点...
菜单接口返回结果中还有一个 icon 字段,我们可以根据这个字段来渲染菜单的 Icon,同样的我们使用elementplus中的Icon组件 首先在 main.ts 中全局引入@element-plus/icons-vue import*asElementPlusIconsVuefrom'@element-plus/icons-vue'; constapp = createApp(App); for(const[key, component]ofObject.entries(Elem...
<template><el-icon><Edit/></el-icon><!-- Or use it independently without derive attributes from parent --><Edit/></template> 效果图: Screen Shot 2023-05-16 at 15.50.46.png 如何动态获取icon图标? <el-menu-itemv-for="item in noChildren":key="item.name":index="item.name"><el-ico...
侧边栏动态渲染 src/router/index.js 路由配置里有公共的路由constantRoutes和异步路由asyncRoutes,异步路由是根据在 meta里设置roles来实现动态的meta: { title: 'permission', icon: 'lock', roles: ['admin', 'editor']}, 权限的判断是在 src/store/modules/permission.js文件里,有个actions。判断如果角色里包...
<el-icon> <!-- 动态组件 --> <component :is="`edit`" /> <component :is="`avatar`" /> <el-icon :size="20"> <component :is="`box`" /> </el-icon> <!-- 结合el-icon 使用 --> <el-icon :size="20"><box /></el-icon> </el-icon>...
vue3 element plus 动态菜单图标 在中后台管理系统中,我们知道可以有多种用户实体。以学生管理系统为例,老师和教务主任就是两个拥有不同职责的实体对象。 当不同权限的用户登录管理系统时,他们所需要的功能也就不同。比如老师管理学生信息,而教务主任不仅可以管理学生,也可以处理一些老师的信息。由于职责不同,(通常...
在模板里面使用动态组件,根据图标名称加载图标,使用style设置大小和颜色,这样就可以了。几个例子:el-input 的 prefix-icon 属性可以设置图标,属性类型是字符串或者组件,试了一下字符串,没有效果,大概需要在使用 el-input 的组件里面注册对应的图标,这样就不方便实现动态图标了,或者全局注册图标。...
Vue3 已切换到默认版本,现在新做的项目基本都直接用 Vue3 了, 但是升级到 Element Plus 后很多人都感觉 icon 的使用方式不习惯、不好用,今天就跟大家分享一个简单又方便的方法,用熟悉的方法使用 icon。 只需要用到 UnoCSS UnoCSS 是antfu 开发的一个原子化 CSS 引擎,这里就不详细说了,大家感兴趣可以去读一...