如何使用显示/隐藏密码在Ionic 2中创建登录名 [英] How to create login in ionic 2 with show/hide password
问题描述
我想使用ionic 2创建这样的设计-> https://codepen.io/Floky87/pen/bVopyZ
I wanted to create a design like this using ionic 2 -> https://codepen.io/Floky87/pen/bVopyZ
这是具有隐藏/显示密码的登录功能.
Which is a login functionality that has a hide/show password.
这是我的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');
}
}
问题是,眼睛图标不可单击.从控制台没有日志.
The Problem is, the eye icon, is not clickable. No log from the console.
当我单击眼睛图标时,它仅允许我从密码字段中输入.
When I click the eye icon, it only allows me to input from the password field.
有人可以帮助我吗?我只希望眼睛图标是可点击的.
Anybody can help me? I just want the eye icon to be clickable.
推荐答案
您可以按照以下方式进行操作
在您的.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;
}
这篇关于如何使用显示/隐藏密码在Ionic 2中创建登录名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!