【问题随记】使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示
【摘要】 问题随记在最新版的 ElementUI 中,使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示,试了好多方法,终于找到了解决办法。 问题解决在官方文档中,可以使用下面代码来注册 ElementPlus 中的所有 icon 并应用到全局import * as ElementPlusIconsVue from '@element-plus/icons-vue'c...
问题随记
在最新版的 ElementUI 中,使用 el-input 标签并添加 prefix-icon 属性,但是图标并未显示,试了好多方法,终于找到了解决办法。
问题解决
在官方文档中,可以使用下面代码来注册 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
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)