|
vue实现密码显示与隐藏的最简方法
更新踩坑：
在element-ui中：
2.15.17版本以前，type=“password”类型的input在输入内容后会自动显示小眼睛在目前最新版本2.15.17中，需要加入 show-password 才可以  ------------分割线--------------------------------------------------------------------
若需手动实现密码显示与隐藏，可接着往下看（自动忽略我用的elementui，那时候我还不知道它自带呜呜） 实现效果：（画质略糊见谅）  要求：闭眼icon覆盖睁眼icon看起来和其本身一样 我用的 icon链接：http://www.fontawesome.com.cn/faicons/ 完整代码：（有点长，但涉及密码显示隐藏的内容很短）
管理员登录
登录系统
忘记密码
export default {
data () {
return {
psw: true,
userCode: '',
userPwd: ''
}
}
}
// 核心：让闭眼睁眼的icon重叠，其他都不重要
.login{
background-color: #fff;
box-shadow: 0 0 10px #999;
width: 320px;
padding: 20px;
position: fixed;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
border-radius: 16px;
.loginImg{
padding: 40px 0px;
img{
height: 100px;
width: 100px;
border-radius: 50%;
}
}
.loginTitle{
width: 120px;
display: flex;
justify-content: center;
font-weight: bold;
font-size: 1.5em;
margin:0px 30% 15px;
border-bottom: 3px solid #3A62D7;
}
.rowEditor{
position: relative;
margin-bottom: 10px;
.fa-user-o,.fa-lock{
position: absolute;
left: 15px;
top: 13px;
}
.fa-eye,.fa-eye-slash{
position: absolute;
right: 15px;
top: 13px;
}
::v-deep .el-input__inner{
padding-left: 36px;
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 2px solid #BBBBBB;
border-radius: 0px;
}
}
.submit{
padding: 25px 0;
display: flex;
justify-content: space-around;
}
}
|