欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼

 更新時(shí)間:2017年08月01日 09:13:56   作者:LuciaHuang  
本篇文章主要介紹了angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

angularjs2 ng2 密碼隱藏顯示代碼結(jié)合ionic2開(kāi)發(fā)移動(dòng)端項(xiàng)目,注冊(cè)頁(yè)的密碼的input一般用password,但是用戶輸入密碼時(shí)可能會(huì)輸入錯(cuò)誤,需要顯示成text。

如圖:

首先,輸入框的類型判斷;

<ion-input type="{{pwshow?'text':'password'}}" placeholder="輸入密碼"></ion-input>

然后,添加眼睛的點(diǎn)擊事件,ngClass判斷圖標(biāo)樣式;

 <a href="javascript:;" rel="external nofollow" item-end (click)="pwshow=!pwshow" [ngClass]="pwshow?'eyeshow':'eyehide'">
  <ion-icon name="ios-eye-off" color="dark" class="eye-hide"></ion-icon>  <!--閉眼圖標(biāo)-->
  <ion-icon name="ios-eye" color="dark" class="eye-show"></ion-icon>  <!--睜眼圖標(biāo)-->
 </a>

最后,附上ngClass的樣式,圖標(biāo)的隱藏顯示。

.eyehide .eye-hide, .eyeshow .eye-show{
  display: block;
}
.eyehidee .eye-show, .eyeshow .eye-hide{
  display: none;
}

 下面附上效果圖啦哈哈。。

初始狀態(tài)效果圖

打開(kāi)眼睛之后效果圖

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論