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

问题随记

在最新版的 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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁依Fanyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值