【已解决】Vue3+Element-plus中input输入框中图标不显示_vue3 输入框不显示图标

---

前言

今天博主正在学习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'
1

2.图标注册

引用的图标要通过Setup进行注册
不 要 用！ components（半个小时的血泪教训）

setup(){
    return {
      Avatar,
      Lock
    }
  }
1
2
3
4
5
6

---

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>
1
2
3
4
5
6

---

效果图