vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码。
【效果图】
【html】
// 前后代码【略】
【js】
showPwd () {
this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';
let e = document.getElementsByClassName('el-icon-view')[0];
this.pwdType == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},
ps:下面看下vue+element-ui实现显示隐藏密码
class="iconfont icon-xianshizy">
class="iconfont icon-yincangby">
export default {
name: "AddC_user",
data(){
return{
cuser_info:{
confirm_pwd:'',
},
visible2: true,
}
},
methods:{
//控制密码显示隐藏
changePass(value,kind) {
this.visible2 = !(value === 'show');
},
},
}
总结
以上所述是小编给大家介绍的vue+elementUi 实现密码显示/隐藏+小图标变化功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对IIS7站长之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!