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

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