elementui el-form输入框设置图标
记录一下写法,免得老是忘记
<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>
显示效果
11月29日更新
在使用vue3时,对应的框架变成了了,与的使用存在较大的差距,折腾了老半天,算搞明白是怎么回事了,分两步走
代码如下:
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])
}
官网页面上给的写法试了很久效果出不来,于是改了一种写法,反正是生效了的。
运行的时候可能会报错,提示-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"><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 Meel-checkbox><el-form-item><el-button style="width: 100%" @click="submit('loginForm')" type="primary">Loginel-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不需要写了,用什么图标直接取用就行了
效果如下