如何创建离子2显示/隐藏密码

Question

登录我想创造这样使用离子2设计 - >

它是有一个隐藏/显示密码登录功能。

这里是我的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

你可以简单地把它包装一个按钮使其可点击：

<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 2

您可以在.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="passIcon" (click)='hideShowPassword()'></ion-icon> 
</ion-item> 

，这将是您的.scss代码。根据您的需要更改

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