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

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

你可能感兴趣的:(控制密码输入框是否显示明文)