iview簡介

iView 是一套基於 Vue.js 的開源 UI 元件庫，主要服務於 PC 介面的中後臺產品。

1.背景

近期，在使用abp開發專案過程中，前端vue輸入登入密碼時預設隱藏，但是如果使用者輸錯密碼需要切換顯示跟隱藏。故有此文。

2.實現最終效果

2.1 隱藏密碼

2.2 顯示密碼

顯示密碼需要點選密碼框左側眼睛

3.實現思路

3.1 v-if判斷當前密碼顯示狀態

密碼輸入框跟密碼圖示最外層用Div標籤包住，並且用vue的v-if v-else監聽其顯示還是隱藏狀態。

<div >
 <div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-iivu-icon-ios-eye-off-outline ivu-input-iivu-input-icon-normal" style="left:0"></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0"> 
 </div>
 <div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-normstyle="left:0"></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="text" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0"> 
 </div>  
</div>

定義顯示狀態值switchPassDisFlag預設情況是隱藏。

switchPassDisFlag:boolean=false

這裡用得是typescript強型別，所以需要定義成boolean型別，之所以定義成boolean型別是為了下面監聽圖示點選事件中狀態取反方便。

3.2 密碼隱藏狀態

使用Div標籤包住圖示跟密碼輸入框，並且設定閉眼圖示，輸入框型別為password。

使用圖示如下：

選中Iview頁面的圖示選單如下圖

選中如下圖的兩隻眼睛即可

密碼隱藏狀態下，顯示閉眼圖示，跟密碼型別，同時監聽眼睛圖示的點選事件，以便切換到睜眼狀態（即密碼顯示狀態）。

div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-off-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i> 
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="password" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0"> 
</div>

3.3 密碼顯示狀態

密碼顯示狀態下，顯示睜眼圖示，跟text型別，同時監聽眼睛圖示的點選事件，

以便切換到閉眼狀態。

<div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i>
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="text" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0"> 
</div>

3.4 兩種眼睛圖示（睜眼，閉眼）的監聽切換密碼顯示狀態事件

SwitchPassDis()
 {
 this.switchPassDisFlag=!this.switchPassDisFlag; 
 }

4.小結

本文不需要引入圖片，方便的利用了iview的睜閉眼圖示；

利用了vue中 v-if,v-else直接面向標籤（即顯示資料）程式設計；

靈活利用了div標籤，因為iview的icon圖示是無法監聽點選事件的，而本文把icon圖示用div標籤包住，從而實現了點選監聽。

總結

到此這篇關於Vue基於iview實現登入密碼的顯示與隱藏功能的文章就介紹到這了,更多相關vue 登入密碼顯示隱藏內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！