为了让 用户 来选择 是否显示密码,所以增加此功能。
<ion-item>
<ion-input type="{{isShow?'text':'password'}}"></ion-input>
<ion-icon (click)="show()" *ngIf="isShow" name="md-eye" item-end></ion-icon>
<ion-icon (click)="hidden()" *ngIf="!isShow" name="md-eye-off" item-end></ion-icon>
</ion-item>
这里我默认的input类型是password,也就是不显示密码。
isShow: boolean = false;
下面通过对icon的点击事件来切换boolean值。
show() {
this.isShow = !this.isShow;
}
hidden() {
this.isShow = !this.isShow;
}
做一个简化吧,合并一下
<ion-item>
<ion-input type="{{isShow?'text':'password'}}"></ion-input>
<ion-icon (click)="showToggle()" *ngIf="isShow" name="md-eye" item-end></ion-icon>
<ion-icon (click)="showToggle()" *ngIf="!isShow" name="md-eye-off" item-end></ion-icon>
</ion-item>
showToggle() {
this.pwshow = !this.pwshow;
}