【问题随记】使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示
【问题随记】使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示
繁依Fanyi
发布于 2024-08-02 08:25:21
发布于 2024-08-02 08:25:21
文章被收录于专栏：繁依Fanyi 的专栏
问题随记
在最新版的 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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-08-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
