问题随记

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

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

问题解决

在官方文档中，可以使用下面代码来注册 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)
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

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

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

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

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

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

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

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