600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > Vue+ElementUI中的input输入框添加自定义图片

Vue+ElementUI中的input输入框添加自定义图片

时间:2022-08-02 20:28:06

相关推荐

Vue+ElementUI中的input输入框添加自定义图片

ElementUI中input添加输入框通过prefix-icon和suffix-icon来设置就可以。

自定义图片添加方法如下:

1. 效果图

2. 代码实现

第一部分

<el-form ref="formData" :model="formData" label-width="80px" style="padding-top: 70px;" class="loginForm"><el-form-item><el-input class="username" type="text" v-model="formData.USERNAME" autocomplete="off" placeholder="请输入用户名" /></el-form-item><el-form-item><el-input class="password" type="text" v-model="formData.PASSWORD" autocomplete="off" placeholder="请输入密码" /></el-form-item></el-form>

第二部分

.username .el-input__inner{background:url(@/assets/images/icon-username.png) no-repeat 10px center; padding: 0px 50px; /*输入内容左右边距控制*/width: 534px;height: 66px;font-size: 23px;color: #dadada;}.password .el-input__inner{background:url(@/assets/images/icon-password.png) no-repeat 10px center;padding: 0px 50px;width: 534px;height: 66px;font-size: 23px;color: #dadada;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。