<el-icon><Menu/></el-icon> 动态示例 Menu为图标名称,可替换,注意是字符串 <el-icon><component:is="Menu"/></el-icon> 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu:default-active="activeMenu"class="sidebar"><el-sub-menuv-for="(item, index) in menus":index="item.name":key="...
</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]) 等价于上面这行}) // 使用Icon组件 <compo...
el-icon-key el-icon-service el-icon-mobile-phone el-icon-bicycle el-icon-truck el-icon-ship el-icon-basketball el-icon-football el-icon-soccer el-icon-baseball el-icon-wind-power el-icon-light-rain el-icon-lightning el-icon-heavy-rain el-icon-sunrise el-icon-sunrise-1 el-icon-...
"el-icon-key", "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-hea...
class: "el-icon-key", }, { class: "el-icon-service", }, { class: "el-icon-mobile-phone", }, { class: "el-icon-bicycle", }, { class: "el-icon-truck", }, { class: "el-icon-ship", }, { class: "el-icon-basketball", ...
</el-icon> 1. 2. 3. 在菜单列表中使用,渲染出每个菜单不同的图标 <el-menu :default-active="activeMenu" class="sidebar"> <el-sub-menu v-for="(item, index) in menus" :index="item.name" :key="index"> <template #title> <el-icon> ...
"el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", ...
<el-icon :class="iconsObj[item.id]"></el-icon> {{item.authName}} </template> <!-- 二级菜单 --> <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)"> <template #title...
<el-icon><Search/></el-icon> 但当遇到侧边导航等需求时,可能需要动态加载图标,解决办法如下: <el-menu-itemv-for="(item, index) in data.routeList"index="1":key="index"><template#title>// 此处为动态加载图标方法<component:is="item.meta.icon"style="width: 16px; height: 16px"></compon...
component(key, component) } 其次,图标的命名似乎发生了变化,之前是 代码语言:js AI代码解释 <el-input prefix-icon="el-icon-search" style="width:100%"></el-input> 现在只需像下面一样即可,不需要加上 el-icon 前缀。 代码语言:js AI代码解释 <el-input prefix-icon="search" style="width:100%"...