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

Question

我想用ionic 2 ->创建这样的设计https://codepen.io/Floky87/pen/bVopyZ

这是一种具有隐藏/显示密码的登录功能。

这是我的 HTML 代码

<ion-header>
  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-item>
      <ion-label floating primary>Username</ion-label>
      <ion-input type="text"></ion-input>
</ion-item> 
<ion-item>
      <ion-label floating primary>Password</ion-label>
      <ion-input type="password"></ion-input>
      <ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item> 
</ion-content>

这是结果 -> http://prntscr.com/gz12xg

这是我的.ts代码

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  showHide() {
    console.log('hi');
  }
}

问题是，眼睛图标不可点击。控制台中没有日志。

当我单击眼睛图标时，它只允许我从密码字段输入。

有人可以帮助我吗？我只希望眼睛图标是可点击的。

Answer 1

你可以像下面这样做在您的.ts文件中编写此代码

 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代码。根据您的需要更改

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

Answer 2

您可以简单地将其包装在一个按钮中以使其可单击：

<ion-item>
  <ion-label floating primary>Password</ion-label>
  <ion-input type="password"></ion-input>
  <button ion-button clear item-end (click)='showHide()' style="height:32px;">
    <ion-icon name="eye" style="font-size:32px;"></ion-icon>
  </button>
</ion-item>

使用样式属性控制图标的大小。

Answer 3

public type = 'password';
public showPass = false;
showPassword() {
   this.showPass = !this.showPass;
   if(this.showPass){
     this.type = 'text';
   } else {
     this.type = 'password';
   }
}

<ion-item class="i2"no-lines>
   <ion-input type="{{type}}" name="password" [(ngModel)]="password" placeholder="Password" style="width: 40px;" no-lines>
   </ion-input>
   <button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
      <ion-icon name="eye" style="font-size:25px;"></ion-icon>
   </button>
   <button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
      <ion-icon name="eye-off" style="font-size:25px;"></ion-icon>
   </button>
</ion-item>

Answer 4

对我来说，以下逻辑适用于离子反应：

...all imports go here ...
const ComponentName: React.FC<RouteComponentProps> = ({ history }) => {
    
    const[showPassword, setShowPassword] = useState<boolean>(false)
    const[showPasswordIcon, setShowPasswordIcon] = useState<string>(eyeOffOutline)
    const[hidePasswordIcon, setHidePasswordIcon] = useState<string>(eyeOutline)

    const toggleShowPAssword = () =>{
        setShowPassword(!showPassword)
    }

{
    !showPassword ?
        <IonItem>
            <IonLabel position="stacked">Password</IonLabel>
                <IonInput value={password}  className="sample-pwd-field-class" type="password" onIonChange={(e:any) => setPassword(e.target.value) } >                        
            </IonInput>
            <IonButton className="transparent-bg-btn" color="light" onClick={() => toggleShowPAssword()}  slot="end">
                <IonIcon  icon={showPasswordIcon}></IonIcon>
            </IonButton>         
        </IonItem> : 
        <IonItem >
            <IonLabel position="stacked">Password</IonLabel>
            <IonInput value={password}  className="sample-pwd-field-class" type="text" onIonChange={(e:any) => setPassword(e.target.value) } >                     
            </IonInput>
            <IonButton className="transparent-bg-btn" color="light" onClick={() => toggleShowPAssword()}  slot="end">
                <IonIcon slot="end" icon={hidePasswordIcon}></IonIcon>
            </IonButton>                     
        </IonItem>
        }

希望你觉得它有用。谢谢。