【问题随记】使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示

举报
繁依Fanyi 发表于 2024/10/25 20:50:10 2024/10/25
【摘要】 问题随记在最新版的 ElementUI 中,使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示,试了好多方法,终于找到了解决办法。 问题解决在官方文档中,可以使用下面代码来注册 ElementPlus 中的所有 icon 并应用到全局import * as ElementPlusIconsVue from '@element-plus/icons-vue'c...

问题随记

在最新版的 ElementUI 中,使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示,试了好多方法,终于找到了解决办法。

image.png

问题解决

在官方文档中,可以使用下面代码来注册 ElementPlus 中的所有 icon 并应用到全局

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

其次,图标的命名似乎发生了变化,之前是

<el-input prefix-icon="el-icon-search" style="width:100%"></el-input>

现在只需像下面一样即可,不需要加上 el-icon 前缀。

<el-input prefix-icon="search" style="width:100%"></el-input>

具体的图标名称应该如下面所示,大家可以访问下面链接来查询:

https://element-plus.org/zh-CN/component/icon.html

image.png

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。