【已解決】Vue3+Element-plus中input文本框中圖標不顯示

• 前言
• 一、官網
• 二、步驟
• • 1.圖標按需導入
  • 2.圖標注冊
  • 3.屬性綁定

---

前言

今天博主正在學習Springboot+Vue的后臺管理項目，對著B站的教程視頻在模仿著敲Login頁面時候，發現和up主的代碼一樣但是input文本框里的圖標 不 顯 示！
在摸索了近半個小時之后，發現新版的Element Plus在進行圖標引入時需要按需引入

---

一、官網

官網：https://element-plus.gitee.io/zh-CN/
icon圖標教程：https://element-plus.gitee.io/zh-CN/component/icon.html
input輸入框教程：https://element-plus.gitee.io/zh-CN/component/input.html

---

二、步驟

前面的安裝以及注冊所有圖標在這里就不寫了，在之前的博客中都有提到
傳送門：【已解決】Vue3+Element-plus中icon圖標不顯示的問題

1.圖標按需導入

import { Avatar,Lock} from '@element-plus/icons-vue'

2.圖標注冊

引用的圖標要通過Setup進行注冊
不 要 用！ components（半個小時的血淚教訓）

setup(){return {Avatar,Lock}}

---

3.屬性綁定

要在輸入框中添加圖標，可以使用 prefix-icon 和 suffix-icon 屬性。 另外， prefix 和 suffix 命名的插槽也能正常工作。

<el-form-item prop="username"><el-input v-model="form.username" :prefix-icon="Avatar"/></el-form-item><el-form-item prop="password"><el-input v-model="form.password" show-password :prefix-icon="Lock"/></el-form-item>

---

效果圖

總結

以上是生活随笔為你收集整理的【已解决】Vue3+Element-plus中input输入框中图标不显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。