elementui el-form输入框设置图标

记录一下写法，免得老是忘记

elmentUI

<el-form-item>
  <el-input placeholder="Account" prefix-icon="el-icon-user-solid">
  </el-input>
</el-form-item>
<el-form-item>
  <el-input placeholder="Password" type="password" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item>
  <el-input placeholder="CheckCode" prefix-icon="el-icon-picture-outline-round"></el-input>
</el-form-item>

显示效果

elementPlus

11月29日更新
在使用vue3时，对应的element框架变成了了elementPlus，与elementUI的使用存在较大的差距，折腾了老半天，算搞明白是怎么回事了，分两步走

1. main.js中全局注册所有图标
   代码如下：

import {
    
     createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import router from './router/index'
import * as ElementPlusIcons from '@element-plus/icons'

const app = createApp(App)
for(let iconName in ElementPlusIcons){
    
    
    app.component(iconName, ElementPlusIcons[iconName])
}
app.use(router)
app.mount('#app')

关键代码：

import * as ElementPlusIcons from '@element-plus/icons'
for(let iconName in ElementPlusIcons){
    
    
    app.component(iconName, ElementPlusIcons[iconName])
}

elementplus官网页面上给的写法试了很久效果出不来，于是改了一种写法，反正是生效了的。
运行的时候可能会报错，提示element-plus/icons未安装，安装一下就行了
2. 在页面（组件）上使用图标
看代码，同样是登录页面

<template>
  <div class="login">
    <el-form class="login-form" :model="loginForm" ref="loginForm" :rules="rules">
      <h3 class="title">权限管理系统</h3>
      <el-form-item prop="username">
        <el-input placeholder="Account" type="text" prefix-icon="UserFilled" v-model="loginForm.username">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="Password" type="password" prefix-icon="Lock" v-model="loginForm.password">
        </el-input>
      </el-form-item>
      <el-form-item prop="checkCode">
        <el-input placeholder="CheckCode" prefix-icon="PictureRounded" v-model="loginForm.checkCode"
                  style="width: 63%">
        </el-input>
        <div class="login-code">
          <!-- <img :src="codeUrl" class="login-code-imgs" @click="getCode"/>
          -->
          <div @click="getCode" v-html="code" style="vertical-align:middle"></div>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberme" style="margin: 0 0 15px 0;">Remenber Me</el-checkbox>
      <el-form-item>
        <el-button style="width: 100%" @click="submit('loginForm')" type="primary">Login</el-button>
      </el-form-item>
    </el-form>
    <div class="el-login-footer">
      <span>Copyright © 2018-2022 huanggang All Rights Reserved.</span>
    </div>
  </div>
</template>

注意写法，前面的el-icon不需要写了，用什么图标直接取用就行了
效果如下