在项目中经常可以看见账号或密码输入框,左侧带有一个人形小图标。
在vue中结合element-ui的使用:
html代码
<div class="nameInput">
<el-input v-model="val" placeholder="请输入您的账号"></el-input>
<img src="../assets/person.png" alt="">
</div>
style样式代码
.nameInput{
width: 400px;
position: relative;
}
.el-input__inner{
padding-left: 40px;
}
.nameInput>img{
position: absolute;
left: 12px;
top: 12px;
}
实现原理:外层div开启相对定位position:relative;给输入框设置padding-left,用来放置小图标;给img元素设置绝对定位position:absolute,用top/left偏移属性调整位置,即可实现图示效果。