vue3.0+ElementPlus el-input元素文本框内图标不显示

前言

使用vue3.0+elementplus开发前端webapp应用，在写登录界面时遇到<el-input>元素文本框内图标不显示问题，通过摸索和不断试错最终得到了解决。

问题原因

产生这个问题的原因有两个：

1、vue版本和elementui版本不匹配，vue2.0需要使用elementui库，vue3.0需要使用elementplus库，看版本是否兼容，请查看官网：迁移 | Element Plus

查看自己项目中安装的vue版本和element-plus版本：

npm list vue  #查看vue版本

npm list element-plus  #查看element-plus版本

2、vue3.0是按需导入，导入存在问题，

解决步骤

1、安装：@element-plus/icons-vue

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2、导入：在main.ts文件中如下写，切记将css样式表也导入

import { createApp } from 'vue'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

 3、在login.vue文件中如下实现

<template>
<el-input :prefix-icon="User"  placeholder="请输入用户名"  type="text"  clearable >
</el-input>
<el-input :prefix-icon="Lock"  placeholder="请输入密码" type="password"  show-password ></el-input>
</template>

<script lang="ts" setup>
import {User, Lock} from "@element-plus/icons-vue";
</script>

<style>
/* 调整Element Plus中Input组件内的图标大小 */
.el-input__prefix .el-input__icon,
.el-input__suffix .el-input__icon {
  font-size: 16pt; /* 您可以根据需要调整图标大小 */
}
</style>

总结： 

通过不断的尝试终于得到解决，试错的过程是痛苦的，结果是美好的，回头再看这个问题，首先确保vue版和elementplus版本要兼容，其次就是导入和注册问题，在main.ts文件中要正确的导入和注册组件。这里还有个关键点需要注意，在<scritp>标签中的”setup"关键字不能省略，这个省略就千差万别了，一定是这样写：<script lang="ts" setup>