且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用显示/隐藏密码在 ionic 2 中创建登录

更新时间:2023-12-03 15:34:34

你可以像下面这样在你的 .ts 文件中写下这段代码

You can do like below in your .ts file write this code

 passwordType: string = 'password';
 passwordIcon: string = 'eye-off';

 hideShowPassword() {
     this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
     this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
 }

在你的 .html 中写下这个

<ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input formControlName="password" [type]="passwordType" clearOnEdit="false"></ion-input>
    <ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>

这将是您的 .scss 代码.根据需要改变

and this will be your .scss code. Change according to your need

.passwordIcon{
   font-size:2rem !important;
   position: relative !important;
   top: 22px !important;
   margin: 0 auto !important;
}