创建账号时,输入密码和确认密码一般都是隐藏的,会有个小眼睛来控制密码是否显示。在开发过程中,发现elementUI的show-password属性并没有生效。只能自己手写喽~
首先,给el-input加个小眼睛图标,el-input的type设置为password,效果如下:
输入框step1.png
代码:
//通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标,也可以通过slot来放置图标。
//阿里字体图标库
然后,通过参数来动态绑定input的type、svg-icon的icon-class,给小眼睛绑定点击事件来改变参数的值。这样就可以任意切换了:
输入框step2.png
代码:
//html:
//data:
data() {
return {
passwordShow:{
pwd : false,
check : false
}
}
}
//methods:
changePwdShow(type){
this.passwordShow[type] = !this.passwordShow[type]
}