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

最新推荐文章于 2024-08-20 14:24:16 发布

慢热型网友.

最新推荐文章于 2024-08-20 14:24:16 发布

阅读量3.9k

点赞数 18

分类专栏：企业级开发笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/pdsu_Zhe/article/details/125481619

版权

企业级开发笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在Vue3+Element-plus项目中遇到input文本框内图标不显示的问题，博主经过半小时探索发现是图标引入方式错误。解决方案包括：按需导入图标库如Avatar和Lock，然后在setup中正确注册这两个图标，并通过prefix-icon和suffix-icon属性将图标绑定到input输入框上。完成这些步骤后，input内的图标成功显示。

摘要由CSDN通过智能技术生成

前言

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