html密码框显示明文,控制密码输入框是否显示明文

创建账号时，输入密码和确认密码一般都是隐藏的，会有个小眼睛来控制密码是否显示。在开发过程中，发现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]

}