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

问题随记

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

问题解决

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

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

标签 el icon input prefix

0 人点赞