今天打算用Vue3做个项目，做到登录时打算在input输入框添加图标，然而引用官方的例子发现，图标不显示，在codepen.io编辑平台也不显示……通过一顿摸索发现，Element-plus的图标需要按需引入，而且要进行注册（着实有点麻烦呢），但也只能这样做了。以下是具体说明：

 

1.首先图标要按需引入

 

// 一个用户图像+密码锁图标

 

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

 

2.引用的图标要通过Setup进行注册（最核心的一点）

 

千万不要用components，不要问为啥，因为这是在Vue3中，新引入的Avatar, Lock要注册到全局，使之变成响应式。

 

setup（）{

 

  return {

 

     Avatar,

 

     Lock

 

   }

 

  }

 

3.在el-input的属性中通过绑定的方式使用就ok了。

 

…

 

<el-form-item label="">

 

    <el-input v-model="form.name" :prefix-icon="Avatar"></el-input>

 

 </el-form-item>

 

 <el-form-item label="">

 

     <el-input v-model="form.pass" :prefix-icon="Lock" type="password"></el-input>

 

</el-form-item>